/*============================================================================================================================*/
/* HUBSPOT SAFETY NOTE: keep whitespace between an opening brace and any ID selector inside @media blocks.                     */
/* 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-----------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------*/

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



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


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

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

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

  color: #f7fdff;

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

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

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

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

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

  background-size: 52px 52px;
}

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

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

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

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

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

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

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

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

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

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

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

  color: #f7fdff;

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

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

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

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

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

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

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

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

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

  padding: 0 17px;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  width: 17px;
  height: 17px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

html {
scroll-behavior: smooth;
}

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

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

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

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

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

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

/* ======================================================================
   HOMEPAGE ACTIVE COMPONENTS — SPLIT HERO + APPLICATIONS
   Updated October 30, 2026.
   Replaces the former combined #optionA V6 scroll journey.
   Hero and Applications now operate as independent sections.
   ====================================================================== */

/* ======================================================================
   MANOLIN HOMEPAGE — HERO / LIVING NETWORK + SALMON
   Standalone hero section with the living network + salmon and the new
   scroll transition into the homepage bold statement. Independent from the
   later Watershed / Harpoon applications section.
   ====================================================================== */
#mnHomeHero{--ocean:#06141F;--deep:#071924;--mist:#EDF3F4;--ice:#B2DAFB;--marine:#2896AC;--line:rgba(184,222,235,.18);--line2:rgba(184,222,235,.32)}
#mnHomeHero, #mnHomeHero *{box-sizing:border-box}
#mnHomeHero{scroll-behavior:smooth}
#mnHomeHero{margin:0;color:#EDF3F4;background:#06141f;font-family:"Source Sans 3",Arial,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip}
#mnHomeHero button, #mnHomeHero a{font:inherit}
#mnHomeHero button{cursor:pointer}
#mnHomeHero button:focus-visible, #mnHomeHero a:focus-visible{outline:2px solid #B2DAFB;outline-offset:4px}
#mnHomeHero{isolation:isolate;position:relative;background:#06141F}
#mnHomeHero .journey{height:213svh;min-height:1370px;position:relative}
#mnHomeHero .scene{position:sticky;top:0;height:100svh;min-height:690px;width:100%;overflow:hidden;background:radial-gradient(circle at 70% 31%,rgba(66,148,179,.14),transparent 31%),linear-gradient(122deg,#05131e,#071924 52%,#0b2534)}
#mnHomeHero .scene:before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(rgba(166,209,225,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(166,209,225,.035) 1px,transparent 1px);background-size:52px 52px;opacity:.65;mask-image:none;-webkit-mask-image:none}
#mnHomeHero .scene:after{content:"";position:absolute;z-index:1;inset:0;pointer-events:none;background:radial-gradient(ellipse 89% 79% at 52% 40%,transparent 48%,rgba(2,10,16,.4))}
#mnHomeHero .visual-stage{position:absolute;inset:0;z-index:2;pointer-events:none;transform:translateY(var(--vis-y,0px)) scale(var(--vis-scale,1));transform-origin:59% 29%;transition:filter .6s}
#mnHomeHero .composition{position:absolute;inset:0}
#mnHomeHero .network-box{position:absolute;top:4%;left:31%;width:min(56vw,840px);aspect-ratio:1;max-height:93%;pointer-events:auto;transition:opacity .85s ease,filter .85s ease,transform 1s ease}
#mnHomeHero .fish-box{position:absolute;right:7%;top:41%;width:min(29vw,420px);aspect-ratio:1.89;filter:drop-shadow(0 0 15px #06141f);transition:all 1.05s cubic-bezier(.2,.74,.13,1)}
#mnHomeHero .fish-box:before{content:"";position:absolute;inset:-8%;background:radial-gradient(ellipse,#04121bcc,transparent 70%);filter:blur(17px)}
#mnHomeHero #network, #mnHomeHero #salmon{display:block;width:100%;height:100%;touch-action:pan-y}
#mnHomeHero .hotspots{position:absolute;inset:0;pointer-events:none}
#mnHomeHero .hotspot{position:absolute;width:20px;height:20px;margin:-10px;opacity:0;border:0;background:transparent;padding:0;pointer-events:none}
#mnHomeHero .hotspot:focus-visible{pointer-events:auto;opacity:1;outline:1px solid #B2DAFB;outline-offset:3px;background:radial-gradient(circle,#B2DAFB 0 2px,transparent 3px)}
#mnHomeHero .hero-copy{position:absolute;z-index:8;left:clamp(28px,5vw,96px);bottom:clamp(89px,11vh,126px);width:min(620px,46vw);opacity:var(--intro-o,1);transform:translateY(var(--intro-y,0px));pointer-events:var(--intro-pe,auto)}
#mnHomeHero .eyebrow-label{font:500 10px/1.4 "JetBrains Mono",monospace;letter-spacing:.17em;text-transform:uppercase;color:#B2DAFB;display:flex;align-items:center;gap:15px;margin-bottom:29px}
#mnHomeHero .hero-copy h1{font-family:"Montserrat","Montserrat",sans-serif;font-weight:700;color:#F7FDFF;font-size:clamp(49px,5.05vw,78px);letter-spacing:-.079em;line-height:1.08;margin:0 0 29px}
#mnHomeHero .hero-copy h1 em{color:#B2DAFB;font-weight:200;white-space:nowrap;transition:opacity .3s}
#mnHomeHero .hero-copy h1 .out{opacity:0}
#mnHomeHero .hero-copy p{max-width:590px;color:#bbd1dc;font-size:clamp(15px,1.22vw,19px);font-weight:500;line-height:1.66;margin:0 0 28px}
#mnHomeHero .hero-actions{display:flex;flex-wrap:wrap;gap:11px}
#mnHomeHero .primary, #mnHomeHero .secondary{display:inline-flex;min-height:48px;align-items:center;gap:20px;justify-content:center;padding:0 17px;border:1px solid;white-space:nowrap;text-decoration:none!important;font:700 12px/1 "Montserrat",sans-serif;transition:background .2s,color .2s,border-color .2s,transform .2s}
#mnHomeHero .primary{background:#B2DAFB;border-color:#B2DAFB;color:#06141f}
#mnHomeHero .primary:hover{background:#d1eaff;border-color:#d1eaff;transform:translateY(-2px)}
#mnHomeHero .secondary{border-color:#2896AC;background:#05182430;color:#A2CAEB}
#mnHomeHero .secondary:hover{background:#2896AC23;border-color:#A2CAEB;transform:translateY(-2px)}
#mnHomeHero .primary span, #mnHomeHero .secondary span{font-size:17px;font-weight:400}
#mnHomeHero .hero-meta{position:absolute;z-index:8;left:clamp(28px,5vw,96px);right:clamp(28px,5vw,96px);bottom:25px;display:flex;gap:30px;border-top:1px solid #BED0DD25;padding-top:18px;opacity:var(--intro-o,1);color:#95aeba;font:500 9px/1.4 "JetBrains Mono",monospace;letter-spacing:.11em;text-transform:uppercase;pointer-events:none}
#mnHomeHero .hero-meta b{color:#B2DAFB;margin-right:8px}
#mnHomeHero .tip{--tip-color:#A2CAEB;--tip-rgb:162,202,235;position:fixed;left:0;top:0;width:min(270px,calc(100vw - 28px));z-index:100;pointer-events:none;opacity:0;visibility:hidden;transform:translate(-300vw,-300vh);transition:opacity .18s ease,visibility .18s ease;background:linear-gradient(180deg,rgba(8,28,43,.97),rgba(6,20,31,.97));border:1px solid rgba(var(--tip-rgb),.72);border-radius:4px;padding:17px 18px 15px;box-shadow:0 18px 58px #0008,0 0 0 1px rgba(var(--tip-rgb),.1) inset,0 0 14px rgba(var(--tip-rgb),.14)}
#mnHomeHero .tip.open{opacity:1;visibility:visible;animation:tipPulse 3.6s ease-in-out infinite}
#mnHomeHero .tip .eyebrow{font:500 10px ui-monospace,"JetBrains Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--tip-color)}
#mnHomeHero .tip-name{margin-top:12px;font-size:18px;font-weight:500;color:#EDF3F4;line-height:1.25}
#mnHomeHero .tip-desc{margin-top:8px;font-size:12px;line-height:1.55;color:#BED0DDc9}
@keyframes tipPulse{0%,100%{box-shadow:0 18px 58px #0008,0 0 0 1px rgba(var(--tip-rgb),.10) inset,0 0 12px rgba(var(--tip-rgb),.10)}50%{box-shadow:0 18px 58px #0008,0 0 0 1px rgba(var(--tip-rgb),.18) inset,0 0 18px rgba(var(--tip-rgb),.22)}}
#mnHomeHero .visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;position:absolute;width:1px;height:1px;overflow:hidden}
@media (max-width:1160px){
#mnHomeHero .hero-copy{width:min(530px,52vw)}
#mnHomeHero .hero-copy h1{font-size:clamp(43px,5vw,64px)}
#mnHomeHero .hero-copy p{font-size:15px}
#mnHomeHero .network-box{left:32%;width:66vw}
#mnHomeHero .fish-box{right:2%;width:33vw}
}
@media (max-width:850px){
#mnHomeHero .journey{height:220svh;min-height:1400px}
#mnHomeHero .scene{min-height:720px}
#mnHomeHero .network-box{left:18%;width:80vw;top:0}
#mnHomeHero .fish-box{right:4%;width:40vw;top:29%}
#mnHomeHero .hero-copy{width:87%;bottom:75px}
#mnHomeHero .hero-copy h1{max-width:570px}
#mnHomeHero .hero-copy p{max-width:550px}
#mnHomeHero .hero-meta{font-size:8px;gap:12px}
}
@media (max-width:600px){
#mnHomeHero .scene{min-height:660px}
#mnHomeHero .journey{height:210svh;min-height:1280px}
#mnHomeHero .hero-copy{left:21px;right:21px;width:auto;bottom:67px}
#mnHomeHero .hero-copy h1{font-size:clamp(35px,9vw,52px);line-height:1.08;margin-bottom:17px}
#mnHomeHero .hero-copy p{font-size:13.5px;line-height:1.57;margin-bottom:17px}
#mnHomeHero .eyebrow-label{font-size:8px;margin-bottom:15px}
#mnHomeHero .primary, #mnHomeHero .secondary{padding:0 10px;min-height:41px;font-size:10px;gap:9px}
#mnHomeHero .hero-meta{bottom:12px;left:21px;right:21px;gap:12px;flex-wrap:wrap;padding-top:8px}
#mnHomeHero .hero-meta span{font-size:7px}
#mnHomeHero .network-box{top:0%;left:-5%;width:108vw}
#mnHomeHero .fish-box{top:24%;right:0%;width:55vw}
}
@media (prefers-reduced-motion:reduce){
#mnHomeHero{scroll-behavior:auto!important}
#mnHomeHero .tip.open{animation:none!important}
#mnHomeHero .hero-copy, #mnHomeHero .network-box, #mnHomeHero .fish-box{transition:none!important}
}
#mnHomeHero .hero-copy:before{content:"";position:absolute;z-index:-1;inset:-24px -22px -20px -34px;background:linear-gradient(90deg,rgba(5,19,30,.47),rgba(5,19,30,.20) 70%,transparent);pointer-events:none}
#mnHomeHero .manolin-hero-eyebrow-test{margin-bottom: 13px;

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

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

  font-size: 10px;
  font-weight: 200;
  letter-spacing: 0.15em;
  line-height: 1.45;
  text-transform: uppercase;}
#mnHomeHero .manolin-hero-title-test{max-width: 930px;
  margin: 0 0 25px;

  color: #f7fdff;

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

  font-size: clamp(58px, 7.7vw, 65px);
  font-weight: 700;
  letter-spacing: -0.084em;
  line-height: 0.94;}
#mnHomeHero .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;}
#mnHomeHero .manolin-hero-actions-test{display: flex;
  flex-wrap: wrap;
  gap: 11px;
  margin-bottom: 41px;}
#mnHomeHero .manolin-hero-button-primary-test, #mnHomeHero .manolin-hero-button-secondary-test, #mnHomeHero .manolin-hero-button-primary-test:link, #mnHomeHero .manolin-hero-button-primary-test:visited, #mnHomeHero .manolin-hero-button-primary-test:hover, #mnHomeHero .manolin-hero-button-primary-test:focus, #mnHomeHero .manolin-hero-button-primary-test:active, #mnHomeHero .manolin-hero-button-secondary-test:link, #mnHomeHero .manolin-hero-button-secondary-test:visited, #mnHomeHero .manolin-hero-button-secondary-test:hover, #mnHomeHero .manolin-hero-button-secondary-test:focus, #mnHomeHero .manolin-hero-button-secondary-test:active{box-sizing: border-box;

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

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

  padding: 0 17px;

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

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

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

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

  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    transform 180ms ease;}
#mnHomeHero .manolin-hero-button-primary-test, #mnHomeHero .manolin-hero-button-primary-test:link, #mnHomeHero .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;}
#mnHomeHero .manolin-hero-button-primary-test:hover, #mnHomeHero .manolin-hero-button-primary-test:focus, #mnHomeHero .manolin-hero-button-primary-test:active{border-color: #c9e8ff;
  background: #c9e8ff;
  color: var(--manolin-hero-navy-test) !important;
  transform: translateY(-2px);}
#mnHomeHero .manolin-hero-button-secondary-test, #mnHomeHero .manolin-hero-button-secondary-test:link, #mnHomeHero .manolin-hero-button-secondary-test:visited{border-color: var(--manolin-hero-secondary-test);
  background: transparent;
  color: var(--manolin-hero-secondary-test) !important;}
#mnHomeHero .manolin-hero-button-secondary-test:hover, #mnHomeHero .manolin-hero-button-secondary-test:focus, #mnHomeHero .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);}
#mnHomeHero .manolin-hero-button-primary-test *, #mnHomeHero .manolin-hero-button-secondary-test *, #mnHomeHero .manolin-hero-button-primary-test:hover *, #mnHomeHero .manolin-hero-button-primary-test:focus *, #mnHomeHero .manolin-hero-button-secondary-test:hover *, #mnHomeHero .manolin-hero-button-secondary-test:focus *{text-decoration: none !important;}
#mnHomeHero .manolin-hero-arrow-down-test, #mnHomeHero .manolin-hero-arrow-right-test{display: inline-block;
  flex: 0 0 auto;
  text-decoration: none !important;
  transition: transform 180ms ease;}
#mnHomeHero .manolin-hero-button-primary-test:hover
  .manolin-hero-arrow-down-test, #mnHomeHero .manolin-hero-button-primary-test:focus
  .manolin-hero-arrow-down-test{transform: translateY(3px);}
#mnHomeHero .manolin-hero-button-secondary-test:hover
  .manolin-hero-arrow-right-test, #mnHomeHero .manolin-hero-button-secondary-test:focus
  .manolin-hero-arrow-right-test{transform: translateX(4px);}
#mnHomeHero .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);}
#mnHomeHero .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;}
#mnHomeHero .manolin-hero-meta-item-test b, #mnHomeHero .manolin-hero-meta-item-test strong{color: var(--manolin-hero-cyan-test);
  font-weight: 700;}
#mnHomeHero .hero-copy .manolin-hero-title-test{font-family:"Montserrat","Montserrat",Arial,sans-serif;font-size:clamp(54px,5.2vw,65px);font-weight:700;letter-spacing:-.084em;line-height:.94;margin:0 0 25px;color:#f7fdff}
#mnHomeHero .hero-copy .manolin-hero-description-test{max-width:760px;margin:0 0 29px;color:rgba(221,241,247,.74);font-size:15px;font-weight:500;line-height:1.72}
#mnHomeHero .hero-copy .manolin-hero-eyebrow-test{margin-bottom:13px}
#mnHomeHero .hero-actions.manolin-hero-actions-test{margin-bottom:0}
#mnHomeHero .manolin-hero-button-primary-test, #mnHomeHero .manolin-hero-button-secondary-test{font-family:"Montserrat",Arial,sans-serif;font-size:13px;font-weight:700;letter-spacing:0;line-height:1;gap:11px;min-height:48px;padding:0 17px;border-width:.5px;white-space:nowrap}
#mnHomeHero .manolin-hero-button-primary-test .manolin-hero-arrow-down-test, #mnHomeHero .manolin-hero-button-secondary-test .manolin-hero-arrow-right-test, #mnHomeHero .manolin-hero-button-primary-test .manolin-hero-arrow-right-test{font-size:inherit;font-weight:700;line-height:1}
#mnHomeHero .manolin-hero-button-secondary-test, #mnHomeHero .manolin-hero-button-secondary-test:link, #mnHomeHero .manolin-hero-button-secondary-test:visited{border-color:#2896AC;background:transparent;color:#2896AC!important}
#mnHomeHero .manolin-hero-button-secondary-test:hover{background:rgba(40,150,172,.1);color:#46b2c8!important;border-color:#46b2c8}
#mnHomeHero .hero-copy:before{opacity:.35}
@media (max-width:850px){
#mnHomeHero .hero-copy .manolin-hero-title-test{font-size:clamp(43px,6.5vw,60px)}
}
@media (max-width:600px){
#mnHomeHero .hero-copy .manolin-hero-title-test{font-size:clamp(34px,8.7vw,48px)}
#mnHomeHero .hero-copy .manolin-hero-description-test{font-size:13px;line-height:1.55;margin-bottom:17px}
#mnHomeHero .manolin-hero-button-primary-test, #mnHomeHero .manolin-hero-button-secondary-test{font-size:10px;min-height:42px;padding:0 10px;gap:7px}
}
#mnHomeHero{--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,.18);--manolin-hero-line-strong-test:rgba(184,222,235,.34)}
#mnHomeHero .hero-copy .manolin-hero-title-test{font-family:"Montserrat",Arial,sans-serif!important;font-weight:700;letter-spacing:-.062em;line-height:1.04}
#mnHomeHero .hero-copy .manolin-hero-title-test{font-size:clamp(48px,5.2vw,72px)!important;max-width:930px}
#mnHomeHero .hero-copy .manolin-hero-title-test em{font-weight:500;letter-spacing:-.063em}
#mnHomeHero .hero-copy .manolin-hero-description-test{font-family:"Source Sans 3",sans-serif;font-weight:500}
@media (max-width:600px){
#mnHomeHero .hero-copy .manolin-hero-title-test{font-size:clamp(33px,8.25vw,48px)!important;line-height:1.03}
}
#mnHomeHero, #mnHomeHero *{font-synthesis:none;}
#mnHomeHero .manolin-hero-title-test{font-family:"Montserrat",Arial,sans-serif!important;}
#mnHomeHero .hero-copy .manolin-hero-title-test{font-weight:700!important;letter-spacing:-.055em!important;line-height:1.065!important;}
@media (max-width:600px){
#mnHomeHero .hero-copy .manolin-hero-title-test{font-size:clamp(34px,8.5vw,48px)!important;line-height:1.055!important;}
#mnHomeHero .hero-copy{bottom:83px!important;}
#mnHomeHero .hero-copy .manolin-hero-description-test{max-width:100%;font-size:13px;line-height:1.55;}
}
@media (max-width:700px){
#mnHomeHero .hero-copy{left:21px!important;right:21px!important;width:auto!important;bottom:94px!important;}
#mnHomeHero .hero-copy h1{font-size:clamp(32px,8.7vw,45px)!important;line-height:1.1!important;}
#mnHomeHero .hero-copy .manolin-hero-description-test{font-size:14px!important;line-height:1.54!important;}
#mnHomeHero .hero-actions{gap:9px!important;}
#mnHomeHero .journey.mobile-product-open{height:auto!important;min-height:0!important;}
}
#mnHomeHero :where(h1,h2,h3,h4,h5,h6){color:inherit;text-transform:none}
#mnHomeHero :where(ol,ul){margin:0;padding:0}
#mnHomeHero :where(li){margin:0}
#mnHomeHero :where(a,button){border-radius:0;box-shadow:none;text-transform:none}
#mnHomeHero :where(table,thead,tbody,tr,th,td){background:transparent}

/* ======================================================================
   MANOLIN HOMEPAGE — STATIC HERO / LIVING NETWORK + SALMON
   The hero is now a normal standalone section. There is no scroll-driven
   fade, blur, scale, sticky handoff, or shared state with later sections.
   ====================================================================== */
#mnHomeHero {
  --mn-home-header-offset: 92px;
  position: relative;
  left: 50%;
  width: 100vw;
  max-width: none;
  margin-left: -50vw;
  margin-right: 0;
  padding: 0 !important;
  overflow: hidden;
  background: #06141F;
}

#mnHomeHero .journey {
  position: relative !important;
  height: auto !important;
  min-height: 0 !important;
}

#mnHomeHero .scene {
  position: relative !important;
  top: auto !important;
  width: 100% !important;
  max-width: none !important;
  height: 100svh !important;
  min-height: 720px;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
}

#mnHomeHero .visual-stage {
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

#mnHomeHero .hero-copy {
  top: 46% !important;
  bottom: auto !important;
  width: min(620px, 46vw);
  opacity: 1 !important;
  transform: translateY(-50%) !important;
  pointer-events: auto !important;
}

#mnHomeHero .hero-meta {
  opacity: 1 !important;
}

@media (max-width: 1160px) {
  #mnHomeHero .hero-copy {
    top: 47% !important;
    width: min(540px, 52vw);
  }
}

@media (max-width: 850px) {
  #mnHomeHero {
    --mn-home-header-offset: 82px;
  }

  #mnHomeHero .scene {
    min-height: 650px;
  }

  #mnHomeHero .hero-copy {
    top: 48% !important;
    left: 24px !important;
    right: 24px !important;
    width: min(620px, 88%) !important;
    bottom: auto !important;
  }
}

@media (max-width: 600px) {
  #mnHomeHero {
    --mn-home-header-offset: 74px;
  }

  #mnHomeHero .scene {
    min-height: 610px;
  }

  #mnHomeHero .hero-copy {
    top: 48% !important;
    left: 21px !important;
    right: 21px !important;
    width: auto !important;
  }

  #mnHomeHero .hero-meta {
    bottom: 12px;
  }
}

/* ======================================================================
   MANOLIN HOMEPAGE — BOLD STATEMENT / VIDEO BACKGROUND
   Standalone statement section with full-bleed aquaculture footage,
   restrained blue overlay, technical left/right rails, and soft reveal.
   ====================================================================== */
#mnHomeStatement {
  --mn-statement-line: rgba(184, 222, 235, 0.18);
  position: relative;
  left: 50%;
  width: 100vw;
  max-width: none;
  margin-left: -50vw;
  overflow: hidden;
  isolation: isolate;
  color: #F7FDFF;
  background: #06141F;
  border-top: 1px solid rgba(184, 222, 235, 0.12);
  border-bottom: 1px solid rgba(184, 222, 235, 0.12);
}

#mnHomeStatement .mn-home-statement-video {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
  opacity: .82;
}

#mnHomeStatement .mn-home-statement-overlay {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(4, 19, 30, .70) 0%, rgba(5, 29, 43, .56) 31%, rgba(9, 47, 65, .68) 58%, rgba(4, 20, 31, .68) 100%),
    linear-gradient(180deg, rgba(5, 20, 31, .38) 0%, rgba(5, 23, 35, .32) 46%, rgba(4, 18, 28, .58) 100%);
}

#mnHomeStatement .mn-home-statement-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .28;
  background-image:
    linear-gradient(rgba(166, 209, 225, .038) 1px, transparent 1px),
    linear-gradient(90deg, rgba(166, 209, 225, .03) 1px, transparent 1px);
  background-size: 52px 52px;
}

#mnHomeStatement .mn-home-statement-overlay::after {
  content: "";
  position: absolute;
  inset: 8% 5%;
  opacity: .18;
  background: radial-gradient(ellipse at 50% 46%, rgba(125, 224, 242, .12), transparent 62%);
  transform: scale(.985);
}

#mnHomeStatement.is-visible .mn-home-statement-overlay::after {
  animation: mnHomeStatementBreath 7.5s ease-in-out 1.2s infinite alternate;
}

#mnHomeStatement .mn-home-statement-inner {
  position: relative;
  z-index: 2;
  width: min(calc(100% - 40px), 1320px);
  min-height: clamp(520px, 68vh, 720px);
  margin: 0 auto;
  padding: 96px clamp(34px, 5vw, 86px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid var(--mn-statement-line);
  border-right: 1px solid var(--mn-statement-line);
}

#mnHomeStatement .mn-home-statement-copy {
  width: min(1080px, 100%);
  margin: 0;
  color: #F7FDFF;
  font-family: "Montserrat", Arial, sans-serif;
  font-size: clamp(31px, 2.75vw, 46px);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.050em;
  text-align: center;
  text-wrap: balance;
  text-shadow: 0 2px 28px rgba(1, 12, 18, .28);
  opacity: 0;
  transform: translateY(16px) scale(.992);
  transform-origin: center center;
  transition:
    opacity 1.55s cubic-bezier(.22, .61, .36, 1),
    transform 1.8s cubic-bezier(.22, .61, .36, 1);
}

#mnHomeStatement.is-visible .mn-home-statement-copy {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@keyframes mnHomeStatementBreath {
  from {
    opacity: .14;
    transform: scale(.987);
  }
  to {
    opacity: .24;
    transform: scale(1.012);
  }
}

@media (max-width: 850px) {
  #mnHomeStatement .mn-home-statement-inner {
    width: min(calc(100% - 28px), 1320px);
    min-height: 560px;
    padding: 82px 32px;
  }

  #mnHomeStatement .mn-home-statement-copy {
    font-size: clamp(29px, 5.8vw, 41px);
  }
}

@media (max-width: 600px) {
  #mnHomeStatement .mn-home-statement-video {
    object-position: 58% center;
  }

  #mnHomeStatement .mn-home-statement-inner {
    width: calc(100% - 24px);
    min-height: 520px;
    padding: 72px 22px;
    justify-content: flex-start;
  }

  #mnHomeStatement .mn-home-statement-copy {
    font-size: clamp(27px, 7.6vw, 35px);
    line-height: 1.17;
    text-align: left;
  }

  #mnHomeStatement .mn-home-statement-overlay {
    background:
      linear-gradient(90deg, rgba(4, 19, 30, .92) 0%, rgba(6, 35, 50, .74) 58%, rgba(4, 20, 31, .89) 100%),
      linear-gradient(180deg, rgba(5, 20, 31, .62) 0%, rgba(5, 23, 35, .56) 48%, rgba(4, 18, 28, .80) 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  #mnHomeStatement .mn-home-statement-video {
    display: none;
  }

  #mnHomeStatement .mn-home-statement-overlay::after {
    animation: none !important;
  }

  #mnHomeStatement .mn-home-statement-copy {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ======================================================================
   MANOLIN HOMEPAGE — WATERSHED + HARPOON APPLICATIONS
   Standalone applications section split from the former V6 scroll journey.
   Purpose: preserve the application chooser, product transitions, Watershed
   dashboard, Harpoon research preview, switching, mobile behavior, and motion.
   ====================================================================== */
#mnHomeApplications{--ocean:#06141F;--deep:#071924;--mist:#EDF3F4;--ice:#B2DAFB;--marine:#2896AC;--line:rgba(184,222,235,.18);--line2:rgba(184,222,235,.32)}
#mnHomeApplications, #mnHomeApplications *{box-sizing:border-box}
#mnHomeApplications{scroll-behavior:smooth}
#mnHomeApplications{margin:0;color:#EDF3F4;background:#06141f;font-family:"Source Sans 3",Arial,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip}
#mnHomeApplications button, #mnHomeApplications a{font:inherit}
#mnHomeApplications button{cursor:pointer}
#mnHomeApplications button:focus-visible, #mnHomeApplications a:focus-visible{outline:2px solid #B2DAFB;outline-offset:4px}
#mnHomeApplications{isolation:isolate;position:relative;background:#06141F}
#mnHomeApplications .app-actions{display:flex;flex-wrap:wrap;gap:11px}
#mnHomeApplications .primary, #mnHomeApplications .secondary{display:inline-flex;min-height:48px;align-items:center;gap:20px;justify-content:center;padding:0 17px;border:1px solid;white-space:nowrap;text-decoration:none!important;font:700 12px/1 "Montserrat",sans-serif;transition:background .2s,color .2s,border-color .2s,transform .2s}
#mnHomeApplications .primary{background:#B2DAFB;border-color:#B2DAFB;color:#06141f}
#mnHomeApplications .primary:hover{background:#d1eaff;border-color:#d1eaff;transform:translateY(-2px)}
#mnHomeApplications .secondary{border-color:#2896AC;background:#05182430;color:#A2CAEB}
#mnHomeApplications .secondary:hover{background:#2896AC23;border-color:#A2CAEB;transform:translateY(-2px)}
#mnHomeApplications .primary span, #mnHomeApplications .secondary span{font-size:17px;font-weight:400}
#mnHomeApplications .chooser{position:absolute;z-index:9;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:0 clamp(26px,5vw,95px) clamp(35px,6.3vh,74px);opacity:var(--choice-o,0);transform:translateY(var(--choice-y,32px));pointer-events:var(--choice-pe,none);visibility:var(--choice-vis,hidden)}
#mnHomeApplications .chooser-title{display:flex;align-items:end;justify-content:space-between;gap:26px;margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid #BED0DD2b}
#mnHomeApplications .chooser-title p{margin:0;color:#A2CAEB;font:500 11px "JetBrains Mono",monospace;letter-spacing:.15em;text-transform:uppercase}
#mnHomeApplications .chooser-title h2{font:700 clamp(25px,2.8vw,42px)/1.13 "Montserrat","Montserrat",sans-serif;letter-spacing:-.05em;margin:7px 0 0}
#mnHomeApplications .chooser-title small{color:#92b2c0;font:500 10px "JetBrains Mono",monospace;letter-spacing:.07em;text-align:right}
#mnHomeApplications .chooser-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
#mnHomeApplications .choice{position:relative;isolation:isolate;min-height:clamp(218px,27vh,292px);padding:25px 28px;text-align:left;overflow:hidden;border:1px solid #BED0DD50;color:#edf3f4;background:linear-gradient(140deg,#102a36,#071a27);transition:border-color .25s,transform .35s}
#mnHomeApplications .choice:hover, #mnHomeApplications .choice:focus-visible{transform:translateY(-3px);border-color:#B2DAFB}
#mnHomeApplications .choice:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,16,25,.91),rgba(4,16,25,.68) 54%,rgba(4,16,25,.26)),linear-gradient(0deg,rgba(5,18,26,.75),transparent 65%);z-index:-1}
#mnHomeApplications .choice .choice-video, #mnHomeApplications .choice .context-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3}
#mnHomeApplications .choice video{opacity:.8}
#mnHomeApplications .context-fallback{background:linear-gradient(130deg,#113b45,#214a56 40%,#071f31)}
#mnHomeApplications .context-fallback.farm{background:radial-gradient(ellipse at 80% 43%,#2b6a68,#123c4e 42%,#072332 74%)}
#mnHomeApplications .context-fallback.feed{background:radial-gradient(ellipse at 72% 48%,#987b46,#354d46 40%,#0a2735 82%)}
#mnHomeApplications .context-fallback:before{content:"";position:absolute;inset:0;opacity:.42;background:repeating-radial-gradient(circle at 75% 45%,transparent 0 26px,#9fd9da55 27px 30px,transparent 31px 63px);animation:contextDrift 24s ease-in-out infinite alternate}
#mnHomeApplications .context-fallback.feed:before{background:repeating-linear-gradient(-18deg,transparent 0 12px,#d9bb7b44 14px 16px,transparent 17px 24px);transform:scale(1.3) rotate(-7deg)}
@keyframes contextDrift{to{transform:scale(1.15) rotate(8deg)}}
#mnHomeApplications .choice small{position:relative;display:block;color:#A2CAEB;font:500 10px "JetBrains Mono",monospace;letter-spacing:.15em;text-transform:uppercase;margin:0 0 9px}
#mnHomeApplications .choice h3{margin:0 0 13px;font:700 clamp(30px,2.6vw,42px) "Montserrat","Montserrat",sans-serif;letter-spacing:-.065em}
#mnHomeApplications .choice p{position:relative;font-size:14px;line-height:1.6;font-weight:500;max-width:400px;margin:0;color:#d6e6ef}
#mnHomeApplications .choice .arrow{position:absolute;top:24px;right:25px;color:#B2DAFB;font-size:25px;font-weight:200}
#mnHomeApplications .choice .context-name{position:absolute;right:23px;bottom:20px;font:500 9px "JetBrains Mono",monospace;letter-spacing:.12em;color:#a9c9d2;text-transform:uppercase;opacity:.65}
#mnHomeApplications .app-stage{position:absolute;z-index:13;inset:0;display:grid;grid-template-columns:minmax(380px,40%) minmax(0,60%);gap:clamp(20px,3.5vw,65px);align-items:center;padding:clamp(25px,4vw,70px) 0 clamp(24px,4vw,65px) clamp(28px,5vw,95px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .8s ease,visibility .8s;--app-offset:120px}
#mnHomeApplications .is-app .app-stage{opacity:1;visibility:visible;pointer-events:auto}
#mnHomeApplications .is-app .chooser{opacity:0!important;pointer-events:none!important;visibility:hidden}
#mnHomeApplications .app-copy{position:relative;z-index:14;max-width:620px;transform:translateY(15px);transition:transform .9s}
#mnHomeApplications .is-app .app-copy{transform:translateY(0)}
#mnHomeApplications .app-kicker{color:#B2DAFB;font:500 10px "JetBrains Mono",monospace;letter-spacing:.17em;text-transform:uppercase;margin-bottom:17px}
#mnHomeApplications .app-copy h2{margin:0 0 19px;font:700 clamp(44px,5vw,74px)/1.08 "Montserrat","Montserrat",sans-serif;letter-spacing:-.08em}
#mnHomeApplications .app-description{color:#c3d6df;font-size:clamp(14px,1.14vw,17px);line-height:1.66;margin:0 0 22px;max-width:550px}
#mnHomeApplications .app-feature-list{list-style:none;margin:0 0 28px;padding:0;max-width:540px}
#mnHomeApplications .app-feature-list li{position:relative;border-top:1px solid #BED0DD26;padding:14px 0 13px 37px}
#mnHomeApplications .app-feature-list li:last-child{border-bottom:1px solid #BED0DD26}
#mnHomeApplications .app-feature-list li .num{position:absolute;left:0;top:15px;font:500 10px "JetBrains Mono",monospace;color:#B2DAFB}
#mnHomeApplications .app-feature-list strong{font:700 14px/1.35 "Montserrat",sans-serif;display:block;color:#EDF3F4;letter-spacing:-.02em}
#mnHomeApplications .app-feature-list span{display:block;margin-top:5px;color:#97b2bf;font-size:12.5px;line-height:1.52}
#mnHomeApplications .app-actions{margin-top:6px}
#mnHomeApplications .product-visual{position:relative;height:min(75vh,710px);min-height:500px;width:100%;overflow:visible}
#mnHomeApplications .visual-wrapper{position:absolute;right:-7%;top:50%;width:min(920px,70vw);transform:translate(14%,-45%);opacity:0;transition:opacity .95s ease,transform 1.2s cubic-bezier(.18,.77,.12,1);pointer-events:none}
#mnHomeApplications .is-app .visual-wrapper.active{transform:translate(0,-45%);opacity:1}
#mnHomeApplications .visual-wrapper:not(.active){visibility:hidden}
#mnHomeApplications .watershed-shell{height:615px;overflow:hidden;background:#f8f9fb;border:1px solid #AEC9D9;box-shadow:0 30px 100px #0009,0 0 55px #2896AC16;color:#283847;display:grid;grid-template-columns:54px 1fr;transform:rotate(.1deg);transform-origin:center}
#mnHomeApplications .ws-rail{background:#1D2E43;display:flex;flex-direction:column;align-items:center;padding:11px 0;gap:17px}
#mnHomeApplications .ws-rail svg{width:21px;height:21px;color:#b3c7dd;opacity:.85}
#mnHomeApplications .ws-rail .boat{width:32px;margin-top:auto;opacity:1}
#mnHomeApplications .ws-side-dot{width:23px;height:23px;border-radius:50%;background:#71879c;margin-bottom:4px}
#mnHomeApplications .ws-rail span{color:#adbfce;font-size:20px}
#mnHomeApplications .ws-contents{min-width:0;padding:17px 17px 18px}
#mnHomeApplications .ws-header{height:54px;display:flex;justify-content:space-between;gap:15px;align-items:flex-start}
#mnHomeApplications .ws-header h3{font:400 23px "Montserrat",sans-serif;letter-spacing:-.05em;margin:0;color:#333d48}
#mnHomeApplications .ws-header p{font:400 10px "Source Sans 3",sans-serif;margin:3px 0;color:#83909e}
#mnHomeApplications .ws-tag{align-self:flex-start;color:#397bc6;background:#eff7ff;border:1px solid #d7eaf9;padding:5px 8px;font:600 10px "Montserrat",sans-serif}
#mnHomeApplications .ws-main{display:grid;grid-template-columns:1fr 1fr 182px;gap:12px;height:calc(100% - 54px)}
#mnHomeApplications .ws-left{display:grid;grid-template-rows:1fr 1fr;gap:12px;min-width:0}
#mnHomeApplications .ws-card{border:1px solid #e4e8ef;background:#fff;border-radius:16px;padding:18px 18px 12px;min-width:0;overflow:hidden}
#mnHomeApplications .ws-card h4{font:500 15px "Montserrat",sans-serif;margin:0 0 4px;color:#353d48;letter-spacing:-.03em}
#mnHomeApplications .ws-card .sub{margin:0 0 15px;color:#7d8794;font-size:10.5px}
#mnHomeApplications .ws-chart{width:100%;height:68%;overflow:visible}
#mnHomeApplications .ws-chart text{font:9px "Source Sans 3",sans-serif;fill:#929ba7}
#mnHomeApplications .ws-chart .grid{stroke:#e9edf1;stroke-width:1}
#mnHomeApplications .ws-chart .line1{stroke:#4191fd;stroke-width:2;fill:none}
#mnHomeApplications .ws-chart .line2{stroke:#22afa8;stroke-width:2.2;fill:none}
#mnHomeApplications .ws-chart .shade{fill:#22afa81d}
#mnHomeApplications .ws-pies{display:flex;align-items:center;gap:7px;margin-top:12px;color:#687582;font-size:9px}
#mnHomeApplications .ws-dot{height:7px;width:7px;border-radius:50%;background:#4296fe}
#mnHomeApplications .ws-dot.teal{background:#21ada6}
#mnHomeApplications .ws-hist-head{display:flex;justify-content:space-between}
#mnHomeApplications .ws-hist-head span{font-size:9px;color:#666}
#mnHomeApplications .ws-table{width:100%;border-collapse:collapse;font:400 10px "Source Sans 3",sans-serif;color:#596473}
#mnHomeApplications .ws-table td{padding:3px 1px;border-bottom:1px solid #f2f3f5}
#mnHomeApplications .ws-table td:nth-child(2){text-align:right;color:#39495a}
#mnHomeApplications .ws-bars{display:grid;gap:13px;margin-top:19px}
#mnHomeApplications .ws-barrow{display:grid;grid-template-columns:76px 1fr;gap:8px;align-items:center;font-size:10px;color:#7b8491}
#mnHomeApplications .ws-bar-bg{background:#f3f5f8;border-radius:10px;height:13px;overflow:hidden}
#mnHomeApplications .ws-bar{height:100%;background:#5d9df8;border-radius:10px;transform-origin:left;animation:barGrow 2.4s cubic-bezier(.25,.75,.2,1) both}
#mnHomeApplications .ws-bar.pulse{animation:barGrow 2.4s cubic-bezier(.25,.75,.2,1) both,barBreath 5s ease-in-out infinite alternate}
@keyframes barGrow{from{transform:scaleX(.26)}to{transform:scaleX(1)}}
@keyframes barBreath{to{filter:brightness(1.2)}}
#mnHomeApplications .ws-sites{display:grid;gap:8px;align-content:start}
#mnHomeApplications .ws-site{min-height:48px;border:1px solid #e7eaf0;border-radius:13px;display:flex;align-items:center;justify-content:space-between;padding:9px 11px;background:#fff}
#mnHomeApplications .ws-site strong{display:block;font:500 10px "Montserrat",sans-serif;color:#4b96dc}
#mnHomeApplications .ws-site small{display:block;font-size:8px;color:#98a1ac;margin-top:3px}
#mnHomeApplications .ws-risk{background:#edf5ff;color:#6385bd;font-size:8px;padding:4px 8px;border-radius:13px;white-space:nowrap}
#mnHomeApplications .ws-risk.alt{background:#ede6f6;color:#8760a2}
#mnHomeApplications .harpoon-scene{position:relative;width:min(920px,70vw);height:680px}
#mnHomeApplications .hp-table{position:absolute;top:1%;left:0;width:82%;height:306px;border:1px solid #BED0DD42;background:#092232;color:#c3d1df;box-shadow:0 25px 70px #0009;overflow:hidden}
#mnHomeApplications .hp-tabhead{height:39px;background:#0d2a3b;display:flex;align-items:center;justify-content:space-between;padding:0 15px;color:#aac2d0;font:500 9px "JetBrains Mono",monospace;letter-spacing:.12em}
#mnHomeApplications .hp-tabhead span:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#2896AC;box-shadow:0 0 10px #2896AC;margin-right:9px}
#mnHomeApplications .hp-pill{font:500 8px "JetBrains Mono",monospace;color:#91b7cb;border:1px solid #BED0DD30;padding:4px 7px}
#mnHomeApplications .hp-viewport{overflow:hidden}
#mnHomeApplications .hp-table table{width:100%;table-layout:fixed;border-collapse:collapse;font:500 9px "JetBrains Mono",monospace}
#mnHomeApplications .hp-table th{text-transform:uppercase;font-size:8px;letter-spacing:.12em;color:#c8e5ef;padding:13px 8px;text-align:left;background:#061b29;border:1px solid #bed0dd1f}
#mnHomeApplications .hp-table td{padding:12px 8px;border:1px solid #bed0dd12;color:#b0c0c9;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#mnHomeApplications .hp-table tr:nth-child(even) td{background:#0c2635}
#mnHomeApplications .hp-table .hl{color:#a7d8ef}
#mnHomeApplications .hp-table .warn{color:#e6c162}
#mnHomeApplications .hp-table .product{border:1px solid #bed0dd33;border-radius:14px;padding:3px 7px;font-size:8px;color:#c1dbe5}
#mnHomeApplications .hp-table .shine{position:absolute;inset:0;transform:translateX(-125%);background:linear-gradient(90deg,transparent,rgba(142,209,230,.055),transparent);animation:sweep 11s linear infinite;pointer-events:none}
@keyframes sweep{to{transform:translateX(140%)}}
#mnHomeApplications .hp-report{position:absolute;right:0;top:34%;width:75%;height:500px;background:#fcfcfb;color:#1d3042;box-shadow:0 27px 90px #000c;overflow:hidden;border:1px solid #d0d6db}
#mnHomeApplications .hp-report:before{content:"";position:absolute;left:0;top:0;height:5px;width:100%;background:#2896AC}
#mnHomeApplications .hp-r-inner{padding:26px 32px;transition:opacity .38s ease,transform .38s ease}
#mnHomeApplications .hp-report.is-swapping .hp-r-inner{opacity:0;transform:translateY(7px)}
#mnHomeApplications .hp-r-head{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:1px solid #d9e2e8;padding-bottom:14px}
#mnHomeApplications .hp-r-logo{display:flex;align-items:center;gap:6px;color:#1b3246;font:700 22px "Montserrat",sans-serif;letter-spacing:-.08em}
#mnHomeApplications .hp-r-logo img{height:23px;width:auto}
#mnHomeApplications .hp-r-code{font:500 9px "JetBrains Mono",monospace;color:#7894a2;text-align:right}
#mnHomeApplications .hp-r-eyebrow{font:600 9px "JetBrains Mono",monospace;text-transform:uppercase;letter-spacing:.16em;color:#2896AC;margin-top:17px}
#mnHomeApplications .hp-r-title{font:700 clamp(19px,1.55vw,25px)/1.14 "Montserrat",sans-serif;letter-spacing:-.04em;max-width:530px;margin:7px 0}
#mnHomeApplications .hp-r-desc{font-size:11px;color:#758b97;line-height:1.5;margin:0 0 15px}
#mnHomeApplications .hp-r-signal{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}
#mnHomeApplications .hp-r-signal div{background:#eff4f6;border-left:2px solid #2896AC;padding:9px}
#mnHomeApplications .hp-r-signal b{display:block;font:700 18px "Montserrat",sans-serif;color:#24394c}
#mnHomeApplications .hp-r-signal small{font:500 8px "JetBrains Mono",monospace;color:#7892a0;text-transform:uppercase}
#mnHomeApplications .hp-r-results{display:grid;grid-template-columns:1.15fr 1fr;gap:20px;border-top:1px solid #dfe7ea;padding-top:14px}
#mnHomeApplications .hp-r-chart-label{font:700 10px "Montserrat",sans-serif;color:#283d4e;margin-bottom:10px}
#mnHomeApplications .hp-r-chart{height:116px;display:flex;gap:13px;align-items:end;border-bottom:1px solid #bacbd3;padding:8px 9px 0;background:repeating-linear-gradient(to top,transparent 0 28px,#dde9ed 29px,transparent 30px)}
#mnHomeApplications .hp-r-chart .bar{background:#2896AC;flex:1;transition:height 1.5s ease}
#mnHomeApplications .hp-r-chart .bar:nth-child(even){background:#a2caeb}
#mnHomeApplications .hp-r-findings p{font-size:10px;line-height:1.55;color:#506979;margin:0 0 7px}
#mnHomeApplications .hp-r-findings strong{color:#203d4f}
#mnHomeApplications .hp-r-foot{position:absolute;bottom:0;left:0;right:0;border-top:1px solid #e0e7eb;padding:10px 32px;font:500 8px "JetBrains Mono",monospace;letter-spacing:.1em;color:#8ca0ac;display:flex;justify-content:space-between}
#mnHomeApplications .next-section{position:relative;min-height:320px;background:#071924;border-top:1px solid #BED0DD25;display:flex;align-items:center;justify-content:center;padding:55px 22px;text-align:center}
#mnHomeApplications .next-section .inner{max-width:750px}
#mnHomeApplications .next-section .kicker{color:#A2CAEB;font:500 10px "JetBrains Mono",monospace;letter-spacing:.15em;text-transform:uppercase}
#mnHomeApplications .next-section h2{font:700 clamp(26px,3vw,42px) "Montserrat",sans-serif;letter-spacing:-.05em;margin:20px 0}
#mnHomeApplications .next-section p{color:#aac1cf;font-size:15px;line-height:1.65}
#mnHomeApplications .next-section a{color:#B2DAFB}
@media (max-width:1160px){
#mnHomeApplications .app-stage{grid-template-columns:minmax(320px,40%) minmax(0,60%);gap:16px}
#mnHomeApplications .app-copy h2{font-size:50px}
#mnHomeApplications .app-description{font-size:14px}
#mnHomeApplications .visual-wrapper{width:790px;right:-20%}
#mnHomeApplications .hp-report{height:480px}
}
@media (max-width:850px){
#mnHomeApplications .chooser{padding:0 24px 35px}
#mnHomeApplications .chooser-title{margin-bottom:15px}
#mnHomeApplications .choice{min-height:190px;padding:19px}
#mnHomeApplications .choice p{font-size:12px}
#mnHomeApplications .choice h3{font-size:27px}
#mnHomeApplications .app-stage{grid-template-columns:1fr;grid-template-rows:auto 1fr;padding:56px 24px 28px;gap:15px;align-content:start;overflow:hidden}
#mnHomeApplications .app-copy{max-width:720px;align-self:start}
#mnHomeApplications .app-kicker{margin-bottom:7px}
#mnHomeApplications .app-copy h2{font-size:40px;margin-bottom:8px}
#mnHomeApplications .app-description{margin-bottom:11px;line-height:1.4}
#mnHomeApplications .app-feature-list{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 16px}
#mnHomeApplications .app-feature-list li{padding:9px 0 5px 20px;border-top:1px solid #BED0DD26}
#mnHomeApplications .app-feature-list li .num{left:0;top:9px}
#mnHomeApplications .app-feature-list strong{font-size:11px}
#mnHomeApplications .app-feature-list span{font-size:10px}
#mnHomeApplications .app-actions .primary, #mnHomeApplications .app-actions .secondary{min-height:41px;font-size:10px}
#mnHomeApplications .product-visual{height:420px;min-height:0}
#mnHomeApplications .visual-wrapper{right:-6%;top:44%;width:800px;transform:translate(14%,-30%) scale(.82);transform-origin:top right}
#mnHomeApplications .is-app .visual-wrapper.active{transform:translate(0,-30%) scale(.82)}
#mnHomeApplications .hp-report{height:480px}
#mnHomeApplications .harpoon-scene{height:610px}
}
@media (max-width:600px){
#mnHomeApplications .primary, #mnHomeApplications .secondary{padding:0 10px;min-height:41px;font-size:10px;gap:9px}
#mnHomeApplications .chooser{padding:0 16px 23px}
#mnHomeApplications .chooser-title{display:block;margin-bottom:14px}
#mnHomeApplications .chooser-title p{font-size:9px}
#mnHomeApplications .chooser-title h2{font-size:26px;margin:8px 0 0}
#mnHomeApplications .chooser-title small{display:none}
#mnHomeApplications .chooser-grid{grid-template-columns:1fr;gap:10px}
#mnHomeApplications .choice{min-height:136px;padding:15px 17px}
#mnHomeApplications .choice h3{font-size:25px;margin-bottom:4px}
#mnHomeApplications .choice p{font-size:11px;line-height:1.42;max-width:290px}
#mnHomeApplications .choice small{font-size:8px;margin-bottom:5px}
#mnHomeApplications .choice .arrow{top:12px;right:15px}
#mnHomeApplications .choice .context-name{display:none}
#mnHomeApplications .app-stage{padding:33px 18px 10px}
#mnHomeApplications .app-copy h2{font-size:39px}
#mnHomeApplications .app-kicker{font-size:8px}
#mnHomeApplications .app-description{font-size:12px;line-height:1.5;margin-bottom:7px}
#mnHomeApplications .app-feature-list{grid-template-columns:1fr;gap:0;margin-bottom:12px}
#mnHomeApplications .app-feature-list li{border-top:1px solid #BED0DD26;padding:6px 0 6px 20px}
#mnHomeApplications .app-feature-list li span{display:none}
#mnHomeApplications .app-feature-list li strong{font-size:10px}
#mnHomeApplications .app-feature-list li .num{top:7px;font-size:9px}
#mnHomeApplications .app-actions{gap:8px}
#mnHomeApplications .app-actions .primary, #mnHomeApplications .app-actions .secondary{font-size:9px;min-height:38px;padding:0 9px}
#mnHomeApplications .product-visual{height:330px}
#mnHomeApplications .visual-wrapper{right:-100px;top:20%;width:720px;transform:translate(14%,0) scale(.48);transform-origin:top right}
#mnHomeApplications .is-app .visual-wrapper.active{transform:translate(0,0) scale(.48)}
#mnHomeApplications .next-section{min-height:230px}
#mnHomeApplications .next-section h2{font-size:24px}
}
@media (prefers-reduced-motion:reduce){
#mnHomeApplications{scroll-behavior:auto!important}
#mnHomeApplications .context-fallback:before, #mnHomeApplications .hp-table .shine, #mnHomeApplications .ws-bar{animation:none!important}
#mnHomeApplications .visual-wrapper, #mnHomeApplications .choice{transition:none!important}
}
@media (min-width:851px){
#mnHomeApplications #harpoonVisual .hp-table{left:15%}
}
@media (max-width:850px) and (min-width:601px){
#mnHomeApplications #harpoonVisual .hp-table{left:13%}
}
@media (max-width:600px){
#mnHomeApplications .visual-wrapper{right:0!important;top:-5%;width:720px}
#mnHomeApplications .harpoon-scene{width:720px;height:650px}
#mnHomeApplications .hp-table{left:0;width:82%}
#mnHomeApplications .hp-report{right:0;width:75%}
}
#mnHomeApplications .watershed-shell{height:625px;grid-template-columns:58px 1fr;border-radius:15px 0 0 15px;transform:none;background:#fff}
#mnHomeApplications .ws-rail{padding:15px 0 11px;gap:0;background:#1d2e43;justify-content:flex-start}
#mnHomeApplications .ws-rail .rail-icon{width:100%;height:49px;display:grid;place-items:center;position:relative;color:#b9c6d4}
#mnHomeApplications .ws-rail .rail-icon svg{width:23px;height:23px;stroke:currentColor;opacity:.87;stroke-width:1.85;fill:none;stroke-linecap:round;stroke-linejoin:round}
#mnHomeApplications .ws-rail .rail-icon.menu{height:32px;margin-bottom:13px}
#mnHomeApplications .ws-rail .rail-icon.menu svg{width:24px;height:24px}
#mnHomeApplications .ws-rail .rail-icon.avatar{height:48px;margin-bottom:14px}
#mnHomeApplications .ws-rail .rail-icon.avatar img{width:38px;height:38px;object-fit:cover;border:1px solid #d9e2eb;border-radius:50%;filter:grayscale(1)}
#mnHomeApplications .ws-rail .rail-icon.active{background:#ffffff11;color:#f7fcff}
#mnHomeApplications .ws-rail .rail-icon.active:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:#b2dafb}
#mnHomeApplications .ws-rail .rail-icon .notification{position:absolute;left:32px;top:4px;background:#ff8b21;color:#06141f;border-radius:15px;padding:0 3px;font:600 8px/15px "Montserrat",sans-serif}
#mnHomeApplications .ws-rail .rail-spacer{flex:1}
#mnHomeApplications .ws-rail .boat{width:39px;height:auto;margin-top:12px;margin-bottom:7px;opacity:1}
#mnHomeApplications .ws-contents{padding:18px 12px 13px 13px}
#mnHomeApplications .ws-header{height:64px}
#mnHomeApplications .ws-header h3{font-size:19px;font-weight:400;letter-spacing:-.028em}
#mnHomeApplications .ws-header p{font-size:11px}
#mnHomeApplications .ws-search{width:19px;color:#9aa0a6;fill:none;stroke:#a5abb0;stroke-width:2;margin:0 6px 0 0}
#mnHomeApplications .ws-main{height:calc(100% - 64px);grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(138px,24%);gap:10px}
#mnHomeApplications .ws-left{gap:10px}
#mnHomeApplications .ws-card{padding:15px 14px 9px;border-radius:17px;border-color:#e5e7eb}
#mnHomeApplications .ws-card h4{font-size:14px}
#mnHomeApplications .ws-card .sub{font-size:10px;margin-bottom:10px}
#mnHomeApplications .ws-chart{height:70%}
#mnHomeApplications .ws-chart .shade{fill:#27b8b41a}
#mnHomeApplications .ws-chart .line1{stroke:#3d8aff;stroke-width:2}
#mnHomeApplications .ws-chart .line2{stroke:#22aba5;stroke-width:2}
#mnHomeApplications .ws-site{min-height:49px;padding:8px 10px;border-radius:14px}
#mnHomeApplications .ws-site strong{font-size:9px}
#mnHomeApplications .ws-site small{font-size:8px}
#mnHomeApplications .ws-risk{border-radius:20px;color:#fafaff;background:#579be8;padding:5px 10px;font-size:8px}
#mnHomeApplications .ws-risk.alt{color:white;background:#8b71a5}
#mnHomeApplications .ws-barrow{grid-template-columns:78px 1fr;gap:6px}
#mnHomeApplications .ws-bars{gap:11px;margin-top:14px}
#mnHomeApplications .ws-bars .ws-bar-bg{height:15px}
#mnHomeApplications .ws-bar span{color:white;position:absolute;right:4px;top:0;font:600 7px/15px "Montserrat",sans-serif}
#mnHomeApplications .ws-bar{position:relative}
#mnHomeApplications .hp-report{height:510px;border:1px solid #d8e0e3;background:#fff}
#mnHomeApplications .hp-report:before{display:none!important}
#mnHomeApplications .hp-r-inner{padding:23px 29px 14px}
#mnHomeApplications .hp-r-head{padding-bottom:10px}
#mnHomeApplications .hp-r-logo img{height:22px}
#mnHomeApplications .hp-r-eyebrow{margin-top:13px;font-size:8px;color:#456e85}
#mnHomeApplications .hp-r-title{font-size:clamp(18px,1.55vw,24px);line-height:1.16;margin:6px 0}
#mnHomeApplications .hp-r-desc{margin-bottom:9px;font-size:10px}
#mnHomeApplications .hp-r-signal{margin:10px 0;padding:8px 0;border-top:1px solid #dfe6e9;border-bottom:1px solid #dfe6e9}
#mnHomeApplications .hp-r-signal>div b{font-size:19px}
#mnHomeApplications .hp-r-signal>div small{font-size:8px}
#mnHomeApplications .hp-r-results{display:block;margin-top:9px}
#mnHomeApplications .hp-r-chart-label{letter-spacing:.08em;color:#415d6c;font-weight:700;font-size:9px}
#mnHomeApplications .report-figure{display:block;width:100%;height:177px;margin-top:6px;overflow:visible}
#mnHomeApplications .report-figure .axis{stroke:#b8c8d0;stroke-width:.75}
#mnHomeApplications .report-figure .grid{stroke:#e5ecef;stroke-width:.75}
#mnHomeApplications .report-figure .zero{stroke:#5d7d8b;stroke-width:1;stroke-dasharray:3 4}
#mnHomeApplications .report-figure text{fill:#607d8b;font:8.5px "Source Sans 3",sans-serif}
#mnHomeApplications .report-figure .series{fill:none;stroke:#2996ac;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:700;stroke-dashoffset:700;animation:revealSeries 2.1s ease-out forwards}
#mnHomeApplications .report-figure .series.alt{stroke:#a0b7d2;stroke-width:1.8;stroke-dasharray:5 4}
#mnHomeApplications .report-figure .ci{stroke:#2896ac;stroke-width:1.45}
#mnHomeApplications .report-figure .dot{fill:#2896ac;stroke:white;stroke-width:1}
#mnHomeApplications .report-figure .point{fill:#2896ac;opacity:0;animation:pointReveal .65s ease-out forwards}
#mnHomeApplications .report-figure .band{fill:#2896ac1b}
#mnHomeApplications .report-figure .emphasis{fill:#0a2538;font-weight:600}
#mnHomeApplications .report-method{display:flex;justify-content:space-between;gap:10px;border-top:1px solid #e8edef;padding:6px 0;color:#607985;font:500 8px/1.3 "JetBrains Mono",monospace;letter-spacing:.015em}
#mnHomeApplications .report-summary{padding:8px 10px;background:#f3f7f9;display:flex;gap:12px;border-left:2px solid #bed0dd;align-items:flex-start;margin-top:6px}
#mnHomeApplications .report-summary .tag{flex:0 0 84px;text-transform:uppercase;font:700 8px/1.5 "JetBrains Mono",monospace;letter-spacing:.07em;color:#1c6380}
#mnHomeApplications .report-summary p{margin:0;font:400 9.5px/1.35 "Source Sans 3",sans-serif;color:#405666}
#mnHomeApplications .hp-r-foot{height:27px;padding:0 28px;font-size:7.8px;background:#fff;border-top:1px solid #e0e7ec;color:#6e8694}
@keyframes revealSeries{to{stroke-dashoffset:0}}
@keyframes pointReveal{to{opacity:1}}
@media (max-width:850px){
#mnHomeApplications .watershed-shell{height:570px}
#mnHomeApplications .ws-main{grid-template-columns:1fr 1fr minmax(105px,22%)}
}
@media (max-width:600px){
#mnHomeApplications .hp-report{height:510px}
}
@media (prefers-reduced-motion:reduce){
#mnHomeApplications .report-figure .series, #mnHomeApplications .report-figure .point{animation:none;stroke-dashoffset:0;opacity:1}
}
#mnHomeApplications .ws-plot-caption{font:500 10px/1.2 "Source Sans 3",sans-serif;color:#3c464f;margin-top:1px;display:flex;align-items:center;gap:4px}
#mnHomeApplications .ws-plot-caption span{color:#89949e;margin-right:auto}
#mnHomeApplications .ws-plot-caption small{font-size:8px;color:#6d767f;border:1px solid #e3e6ea;border-radius:4px;padding:3px 7px}
#mnHomeApplications .choice .choice-poster{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center center;z-index:-2;opacity:.86;filter:saturate(.77) contrast(1.02) brightness(.85);transition:filter .35s ease;}
#mnHomeApplications .choice:hover .choice-poster, #mnHomeApplications .choice:focus-visible .choice-poster{filter:saturate(.89) contrast(1.04) brightness(.97)}
#mnHomeApplications .choice:after{background:linear-gradient(90deg,rgba(4,16,25,.94) 0%,rgba(4,16,25,.74) 44%,rgba(4,16,25,.18) 100%),linear-gradient(0deg,rgba(4,16,25,.72),transparent 70%)}
#mnHomeApplications .choice .context-fallback:before{animation:none;opacity:.16}
#mnHomeApplications .choice .choice-video{z-index:-2;opacity:0;transition:opacity .45s ease}
@media (prefers-reduced-motion:reduce){
#mnHomeApplications .choice .choice-poster{transition:none}
}
#mnHomeApplications{--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,.18);--manolin-hero-line-strong-test:rgba(184,222,235,.34)}
#mnHomeApplications .ws-rail .rail-icon.avatar img{object-position:center bottom;background:#1D2E43}
#mnHomeApplications .hp-r-inner{padding:19px 26px 8px}
#mnHomeApplications .hp-r-results{margin-top:6px}
#mnHomeApplications .report-figure{height:141px}
#mnHomeApplications .hp-r-foot{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between}
#mnHomeApplications .hp-report{border-top:1px solid #d8e0e3}
@media (max-width:600px){
#mnHomeApplications .report-figure{height:137px}
}
#mnHomeApplications .app-copy h2{font-family:"Montserrat",Arial,sans-serif!important;font-weight:700;letter-spacing:-.062em;line-height:1.04}
#mnHomeApplications .hp-r-logo{font-family:"Montserrat",sans-serif}
#mnHomeApplications .choice{isolation:isolate;overflow:hidden;background:#071c2c}
#mnHomeApplications .choice .context-fallback{z-index:-3!important}
#mnHomeApplications .choice .choice-poster{z-index:-2;opacity:0!important;filter:saturate(.64) brightness(.58);transition:opacity .55s ease,filter .55s ease,transform .75s ease;transform:scale(1.04)}
#mnHomeApplications .choice:hover .choice-poster, #mnHomeApplications .choice:focus-visible .choice-poster{opacity:.62!important;filter:saturate(.69) brightness(.70);transform:scale(1)}
#mnHomeApplications .choice:after{z-index:-1!important;background:linear-gradient(90deg,rgba(4,16,25,.98) 0%,rgba(4,16,25,.87) 46%,rgba(4,16,25,.58) 100%),linear-gradient(0deg,rgba(4,16,25,.68) 0%,transparent 80%)!important}
#mnHomeApplications .choice .choice-video{z-index:-2;opacity:0!important}
#mnHomeApplications .choice:hover .choice-video, #mnHomeApplications .choice:focus-visible .choice-video{opacity:.35!important}
#mnHomeApplications .ws-rail{background:#1c2e45!important}
#mnHomeApplications .ws-rail .rail-icon{border-radius:0!important;display:flex;align-items:center;justify-content:center;position:relative}
#mnHomeApplications .ws-rail .rail-icon img{width:68%;height:68%;object-fit:contain;filter:none!important}
#mnHomeApplications .ws-rail .rail-icon.menu img{width:70%;height:70%}
#mnHomeApplications .ws-rail .rail-icon.bell img{width:90%;height:90%}
#mnHomeApplications .ws-rail .rail-icon.avatar img{width:78%;height:78%;border-radius:50%;object-fit:cover}
#mnHomeApplications .ws-rail .rail-icon.life{background:#0e1d31!important}
#mnHomeApplications .ws-rail .rail-icon.life img{width:78%;height:78%}
#mnHomeApplications .ws-rail .rail-icon.settings svg, #mnHomeApplications .ws-rail .rail-icon.power svg{width:22px;height:22px;fill:none;stroke:#b6c3cc;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
#mnHomeApplications .ws-header h3{font-family:"Montserrat",sans-serif!important;font-size:clamp(13px,1.5vw,20px)!important;font-weight:400!important;letter-spacing:-.04em!important}
#mnHomeApplications .ws-header p{font-family:"Source Sans 3",sans-serif!important;font-size:clamp(9px,1vw,13px)!important}
#mnHomeApplications .ws-main{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(145px,23%);gap:12px}
#mnHomeApplications .ws-card{border-radius:18px!important;min-width:0;overflow:hidden}
#mnHomeApplications .ws-card h4{font-family:"Montserrat",sans-serif!important;font-size:clamp(14px,1.5vw,20px)!important;letter-spacing:-.045em!important;font-weight:400!important}
#mnHomeApplications .ws-card p.sub{font-size:clamp(9px,.94vw,12px)!important}
#mnHomeApplications .ws-plot-actions, #mnHomeApplications .ws-hist-options{display:flex;align-items:center;justify-content:space-between;font-family:"Source Sans 3",sans-serif;color:#333a43;font-size:11px;min-height:24px;margin:8px 0 1px}
#mnHomeApplications .ws-plot-actions>span:first-child{margin-left:19%;border-bottom:1px solid #c8cdd1;padding-bottom:3px;font-weight:500}
#mnHomeApplications .ws-select-chevron{display:inline-block;width:7px;height:7px;transform:rotate(45deg) translateY(-3px);border-right:2px solid #aab7bd;border-bottom:2px solid #aab7bd;margin-left:8px}
#mnHomeApplications .ws-options{border:1px solid #d6dbe0;border-radius:6px;padding:4px 9px;color:#434a52;font-size:10px;white-space:nowrap}
#mnHomeApplications .ws-parasite-chart{width:100%;height:auto;aspect-ratio:800/480;display:block}
#mnHomeApplications .ws-hist-chart{width:100%;height:auto;aspect-ratio:740/410;display:block;margin-top:0}
#mnHomeApplications .ws-hist-head{align-items:flex-start}
#mnHomeApplications .ws-hist-head .fish-stock-numbers{display:flex;flex-direction:column;gap:2px;font-size:9px;white-space:nowrap;color:#777}
#mnHomeApplications .ws-hist-head .fish-stock-numbers span{display:flex;justify-content:space-between;gap:7px}
#mnHomeApplications .ws-hist-head .fish-stock-numbers b{font-weight:500;color:#333}
#mnHomeApplications .ws-hist-options{justify-content:flex-end;margin:8px 0 0}
#mnHomeApplications .ws-hist-bottom{text-align:center;font:400 10px "Montserrat",sans-serif;color:#404651;margin-top:3px}
#mnHomeApplications .ws-mortality-table{border-collapse:collapse;width:100%;table-layout:fixed;font:400 clamp(8px,.79vw,11px)/1.55 "Source Sans 3",sans-serif;color:#3a3c42;margin-top:14px}
#mnHomeApplications .ws-mortality-table th{text-align:left;font-weight:600;padding-bottom:6px;white-space:nowrap;font-size:10px}
#mnHomeApplications .ws-mortality-table td{padding:1px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#mnHomeApplications .ws-mortality-table td:nth-child(2), #mnHomeApplications .ws-mortality-table td:nth-child(3), #mnHomeApplications .ws-mortality-table th:nth-child(2), #mnHomeApplications .ws-mortality-table th:nth-child(3){text-align:right}
#mnHomeApplications .ws-mortality-table th:first-child{width:65%}
#mnHomeApplications .ws-mortality-table th:nth-child(2){width:18%}
#mnHomeApplications .ws-mortality-table th:nth-child(3){width:17%}
#mnHomeApplications .ws-feed-detailed{display:flex;flex-direction:column;gap:7px;margin:19px 0 2px}
#mnHomeApplications .ws-feed-row{display:grid;grid-template-columns:66px minmax(0,1fr);gap:6px;align-items:center}
#mnHomeApplications .ws-feed-row .site-label{font:500 10px "Source Sans 3",sans-serif;text-align:right;white-space:nowrap;color:#31373c}
#mnHomeApplications .ws-feed-row .bar-track{height:15px;min-width:0;border-radius:10px;background:linear-gradient(#f0f0f0,#f8f8f8);box-shadow:inset 0 1px 2px #d9d9d9}
#mnHomeApplications .ws-feed-row .bar-fill{height:100%;background:#6098ed;border-radius:0 10px 10px 0;position:relative;animation:wsBarIn 1.4s both ease-out;transform-origin:left}
#mnHomeApplications .ws-feed-row .bar-number{position:absolute;right:0;top:0;transform:translateY(-.5px);font:600 9px/15px "Source Sans 3",sans-serif;border-radius:9px;background:#234573;color:white;min-width:46px;text-align:center}
@keyframes wsBarIn{from{transform:scaleX(.82);opacity:.5}to{transform:scaleX(1);opacity:1}}
#mnHomeApplications .ws-sites{gap:8px!important}
#mnHomeApplications .ws-site{border-radius:12px!important;min-height:50px!important}
#mnHomeApplications .ws-site strong{font-family:"Source Sans 3",sans-serif;font-weight:500}
#mnHomeApplications .hp-report{border:1px solid #c9d6dc!important;background:white!important;box-shadow:0 21px 80px rgba(0,0,0,.26)!important}
#mnHomeApplications .hp-r-inner{padding:22px 27px 0!important}
#mnHomeApplications .hp-r-head{padding-bottom:10px}
#mnHomeApplications .hp-r-logo img{height:25px;max-width:160px;object-fit:contain}
#mnHomeApplications .hp-r-eyebrow{margin-top:12px;font-size:8px!important;color:#2996AC;letter-spacing:.12em}
#mnHomeApplications .hp-r-title{font-family:"Montserrat",sans-serif;font-size:clamp(18px,1.5vw,24px);margin:5px 0 3px;max-width:93%}
#mnHomeApplications .hp-r-desc{font-size:9.5px;margin:0 0 11px;color:#60717d}
#mnHomeApplications .hp-study-design{display:grid;grid-template-columns:1fr 1.15fr;gap:14px;background:#eef5f7;border-left:2px solid #2996AC;padding:10px 13px}
#mnHomeApplications .hp-study-design span{font:600 7px/1.3 "JetBrains Mono",monospace;letter-spacing:.10em;color:#678391;display:block;margin-bottom:5px}
#mnHomeApplications .hp-study-design b{font:600 10px/1.25 "Source Sans 3",sans-serif;color:#274252;display:block}
#mnHomeApplications .hp-results-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:13px 0 5px}
#mnHomeApplications .hp-results-head div{font:700 11px/1.2 "Montserrat",sans-serif;color:#16374a}
#mnHomeApplications .hp-results-head span{font:500 7px "JetBrains Mono",monospace;color:#7293a1;white-space:nowrap}
#mnHomeApplications .report-graphic{min-height:190px;padding:0!important;margin:0!important;background:none!important}
#mnHomeApplications .analysis-layout{background:#fff;border-top:1px solid #e3edef;border-bottom:1px solid #e3edef;padding:8px 0 9px;min-height:181px}
#mnHomeApplications .analysis-caption{font:600 7px/1.2 "JetBrains Mono",monospace;letter-spacing:.07em;color:#658293;margin-bottom:7px}
#mnHomeApplications .analysis-layout svg{display:block;width:100%;height:155px}
#mnHomeApplications .analysis-legend, #mnHomeApplications .analysis-subnote{font:400 8px/1.3 "Source Sans 3",sans-serif;color:#567182}
#mnHomeApplications .analysis-subnote{margin-top:5px;color:#4d677b}
#mnHomeApplications .analysis-layout .legend-line{display:inline-block;width:17px;height:2px;background:#16849c;vertical-align:3px}
#mnHomeApplications .analysis-layout .legend-line.reference{background:#d39465}
#mnHomeApplications .evidence-bars{display:flex;flex-direction:column;gap:8px;padding:12px 0 12px}
#mnHomeApplications .evidence-row{display:grid;grid-template-columns:110px minmax(0,1fr) 40px;gap:10px;align-items:center;font:600 9.5px "Source Sans 3",sans-serif;color:#2c4c60}
#mnHomeApplications .evidence-track{height:12px;background:#e8f1f2;border-radius:1px;overflow:hidden}
#mnHomeApplications .evidence-fill{height:100%;background:#2996ac;animation:barEvidenceIn 1.4s ease-out both;transform-origin:left}
#mnHomeApplications .evidence-fill.positive{background:#7bb9aa}
@keyframes barEvidenceIn{from{transform:scaleX(.15)}to{transform:scaleX(1)}}
#mnHomeApplications .evidence-row b{text-align:right;font:700 13px "Montserrat",sans-serif;color:#0b5266}
#mnHomeApplications .hp-r-findings-panel{display:flex;align-items:flex-start;gap:10px;padding:9px 0 0}
#mnHomeApplications .hp-findings-kicker{flex:none;font:600 7px "JetBrains Mono",monospace;letter-spacing:.08em;color:#2996ac;margin-top:2px}
#mnHomeApplications .hp-r-findings-panel p{font:400 9px/1.5 "Source Sans 3",sans-serif;color:#4f6774;margin:0}
#mnHomeApplications .hp-r-analysis-foot{display:flex;justify-content:space-between;gap:8px;border-top:1px solid #e7edef;margin-top:9px;padding:8px 0 0;font:500 7px/1.3 "JetBrains Mono",monospace;color:#78909d}
#mnHomeApplications .hp-r-analysis-foot span:first-child{max-width:65%}
#mnHomeApplications .hp-r-analysis-foot span:last-child{text-align:right}
#mnHomeApplications .hp-r-foot{border-color:#d9e4e8;letter-spacing:.06em}
@media (min-width:1300px){
#mnHomeApplications .ws-card{padding:18px!important}
#mnHomeApplications .ws-main{gap:13px}
#mnHomeApplications .watershed-shell{min-height:590px}
}
@media (max-width:1060px){
#mnHomeApplications .ws-mortality-table{font-size:8px}
#mnHomeApplications .ws-feed-row{grid-template-columns:52px 1fr}
#mnHomeApplications .ws-feed-row .site-label{font-size:8px}
#mnHomeApplications .ws-feed-row .bar-number{font-size:8px}
#mnHomeApplications .hp-study-design b{font-size:9px}
}
@media (max-width:850px){
#mnHomeApplications .ws-main{grid-template-columns:1fr 1fr minmax(100px,21%)}
#mnHomeApplications .ws-card h4{font-size:14px!important}
#mnHomeApplications .ws-card p.sub{font-size:9px!important}
#mnHomeApplications .ws-card{padding:12px!important}
#mnHomeApplications .ws-feed-detailed{gap:5px}
#mnHomeApplications .ws-feed-row .bar-track{height:12px}
#mnHomeApplications .ws-feed-row .bar-number{line-height:12px}
#mnHomeApplications .hp-r-inner{padding:16px 18px 0!important}
#mnHomeApplications .analysis-layout{min-height:160px}
#mnHomeApplications .report-graphic{min-height:170px}
}
@media (max-width:600px){
#mnHomeApplications .ws-card{padding:9px!important}
#mnHomeApplications .ws-main{gap:6px}
#mnHomeApplications .ws-sites{gap:4px!important}
#mnHomeApplications .hp-r-inner{padding:14px 15px 0!important}
#mnHomeApplications .hp-r-title{font-size:17px}
#mnHomeApplications .hp-study-design{gap:8px;padding:8px}
#mnHomeApplications .hp-study-design b{font-size:8px}
#mnHomeApplications .hp-results-head{margin-top:8px}
#mnHomeApplications .analysis-layout svg{height:130px}
#mnHomeApplications .report-graphic{min-height:145px}
#mnHomeApplications .hp-r-analysis-foot{font-size:6px}
}
@media (max-width:600px){
#mnHomeApplications .product-visual{height:390px}
#mnHomeApplications .visual-wrapper{transform:translate(14%,0) scale(.55);transform-origin:top right}
#mnHomeApplications .is-app .visual-wrapper.active{transform:translate(0,0) scale(.55)}
}
@media (prefers-reduced-motion:reduce){
#mnHomeApplications .choice .choice-poster, #mnHomeApplications .choice .choice-video{transition:none}
#mnHomeApplications .ws-feed-row .bar-fill, #mnHomeApplications .evidence-fill{animation:none}
}
#mnHomeApplications, #mnHomeApplications *{font-synthesis:none;}
#mnHomeApplications .chooser-title h2, #mnHomeApplications .choice h3, #mnHomeApplications .app-copy h2{font-family:"Montserrat",Arial,sans-serif!important;}
#mnHomeApplications .chooser-title h2{font-weight:650;letter-spacing:-.044em;}
#mnHomeApplications .choice h3{font-size:clamp(29px,2.5vw,40px);font-weight:650;letter-spacing:-.048em;}
#mnHomeApplications .app-copy h2{font-weight:700;letter-spacing:-.052em;}
#mnHomeApplications .ws-header h3, #mnHomeApplications .ws-card h4, #mnHomeApplications .ws-hist-bottom{font-family:"Source Sans 3",Arial,sans-serif!important;letter-spacing:-.025em!important;
 font-weight:400!important;}
#mnHomeApplications .ws-header h3{font-size:23px!important;line-height:1.24;}
#mnHomeApplications .ws-card h4{font-size:17px!important;line-height:1.25;margin:0 0 2px!important;}
#mnHomeApplications .ws-card p.sub{font:400 11px/1.35 "Source Sans 3",sans-serif!important;margin:0 0 7px!important;color:#80878f!important;}
#mnHomeApplications .ws-hist-bottom{font-size:11px!important;line-height:1.25;}
#mnHomeApplications .watershed-shell{width:1100px;height:672px;min-height:0!important;
 grid-template-columns:57px minmax(0,1fr);border:0!important;border-radius:0!important;
 outline:1px solid rgba(200,214,221,.34);outline-offset:0;background:#fff!important;
 box-shadow:0 28px 85px rgba(0,0,0,.30)!important;transform:none!important;}
#mnHomeApplications .ws-rail{padding:13px 0 13px!important;gap:0!important;min-height:0;overflow:hidden;background:#1D2E43!important;}
#mnHomeApplications .ws-rail .rail-icon{width:57px!important;height:46px!important;flex:0 0 46px;display:grid!important;place-items:center;position:relative;background:transparent;}
#mnHomeApplications .ws-rail svg{display:block;width:23px!important;height:23px!important;stroke:#aab8c6!important;stroke-width:1.65!important;stroke-linecap:round;stroke-linejoin:round;fill:none;opacity:1!important;}
#mnHomeApplications .ws-rail .menu{height:39px!important;flex-basis:39px;margin:0 0 7px!important;}
#mnHomeApplications .ws-rail .menu svg{width:25px!important;height:25px!important;}
#mnHomeApplications .ws-rail .avatar{height:54px!important;flex-basis:54px;margin:0 0 15px!important;}
#mnHomeApplications .ws-rail .avatar img{width:34px!important;height:34px!important;border-radius:50%;object-fit:cover;filter:grayscale(1);border:0!important;}
#mnHomeApplications .ws-rail .bell svg{width:24px!important;height:24px!important;}
#mnHomeApplications .ws-rail .search svg{width:24px!important;height:24px!important;}
#mnHomeApplications .ws-rail .life svg{stroke:#edf3f4!important;width:25px!important;height:25px!important;}
#mnHomeApplications .ws-rail .file svg, #mnHomeApplications .ws-rail .globe svg{width:23px!important;height:23px!important;}
#mnHomeApplications .ws-rail .active{background:#112136!important;}
#mnHomeApplications .ws-rail .active:before{width:2px!important;}
#mnHomeApplications .ws-rail .notification{left:32px!important;top:3px!important;font-size:9px!important;line-height:16px!important;min-width:16px;text-align:center;padding:0 2px!important;}
#mnHomeApplications .ws-rail .rail-spacer{min-height:0;flex:1;}
#mnHomeApplications .ws-rail .settings, #mnHomeApplications .ws-rail .power{height:35px!important;flex-basis:35px;}
#mnHomeApplications .ws-rail .settings svg, #mnHomeApplications .ws-rail .power svg{width:20px!important;height:20px!important;stroke:#aab8c6!important;}
#mnHomeApplications .ws-rail img.boat{display:block!important;width:34px!important;height:16px!important;min-height:16px!important;max-width:34px;
 object-fit:contain!important;object-position:center!important;flex:0 0 16px;align-self:center;margin:9px 0 0!important;opacity:1;border:0!important;padding:0;}
#mnHomeApplications .ws-contents{padding:17px 17px 16px 19px!important;min-width:0;}
#mnHomeApplications .ws-header{height:64px!important;align-items:flex-start;}
#mnHomeApplications .ws-header p{font-size:12px!important;margin-top:3px!important;letter-spacing:0;}
#mnHomeApplications .ws-main{height:calc(100% - 64px);grid-template-columns:minmax(0,1fr) minmax(0,1fr) 186px!important;gap:14px!important;}
#mnHomeApplications .ws-left{grid-template-rows:1fr 1fr!important;gap:12px!important;min-height:0;}
#mnHomeApplications .ws-card{padding:15px 17px 11px!important;border:1px solid #e4e7e9!important;border-radius:18px!important;box-shadow:none!important;overflow:hidden;}
#mnHomeApplications .ws-card-title{min-height:47px;}
#mnHomeApplications .ws-parasite-card .ws-plot-actions{font-size:11px!important;margin:1px 0 0!important;min-height:24px;}
#mnHomeApplications .ws-parasite-card .ws-plot-actions>span:first-child{margin-left:15%;}
#mnHomeApplications .ws-parasite-chart{display:block;max-height:197px!important;width:100%;height:auto!important;aspect-ratio:800/480;overflow:hidden;}
#mnHomeApplications .ws-hist-options{margin:0!important;min-height:23px;}
#mnHomeApplications .ws-hist-chart{height:auto!important;max-height:184px;display:block;overflow:hidden;}
#mnHomeApplications .ws-hist-head .fish-stock-numbers{font-size:9px!important;gap:1px!important;line-height:1.4;}
#mnHomeApplications .ws-mortality-table{margin-top:4px!important;font-size:10px!important;line-height:1.36!important;}
#mnHomeApplications .ws-mortality-table td{padding:2px 1px!important;}
#mnHomeApplications .ws-mortality-table th{padding-bottom:4px;font-size:10px!important;}
#mnHomeApplications .ws-feed-detailed{margin:10px 0 0!important;gap:5px!important;}
#mnHomeApplications .ws-feed-row{grid-template-columns:74px minmax(0,1fr)!important;gap:6px!important;}
#mnHomeApplications .ws-feed-row .site-label{font-size:9px!important;font-weight:500;line-height:1.1;}
#mnHomeApplications .ws-feed-row .bar-track{height:12px!important;border-radius:8px;background:#f0f1f2;box-shadow:inset 0 1px 2px #e0e0e0;}
#mnHomeApplications .ws-feed-row .bar-fill{height:100%;border-radius:0 8px 8px 0;}
#mnHomeApplications .ws-feed-row .bar-number{min-width:44px!important;height:12px!important;line-height:12px!important;font-size:8px!important;font-weight:600;}
#mnHomeApplications .ws-sites{gap:8px!important;}
#mnHomeApplications .ws-site{min-height:51px!important;padding:9px!important;}
#mnHomeApplications .choice{background:#071b29!important;}
#mnHomeApplications .choice .context-fallback, #mnHomeApplications .choice .context-fallback:before{display:none!important;}
#mnHomeApplications .choice:before{display:none!important;content:none!important;}
#mnHomeApplications .choice .choice-poster{opacity:0!important;transform:scale(1.025);filter:brightness(.64) saturate(.75);transition:opacity .42s ease,transform .7s ease;}
#mnHomeApplications .choice:hover .choice-poster, #mnHomeApplications .choice:focus-visible .choice-poster{opacity:.53!important;transform:scale(1);}
#mnHomeApplications .choice:after{background:linear-gradient(90deg,rgba(4,16,25,.97) 0%,rgba(4,16,25,.85) 48%,rgba(4,16,25,.67) 100%)!important;}
#mnHomeApplications + .next-section, #mnHomeApplications .next-section{display:none!important;}
@media (max-width:850px){
#mnHomeApplications .app-stage{display:flex!important;flex-direction:column!important;align-items:stretch!important;
   justify-content:flex-start!important;gap:20px;overflow-y:auto!important;overscroll-behavior:contain;
   padding:28px 22px 36px!important;scrollbar-width:thin;}
#mnHomeApplications .app-copy{flex:0 0 auto;max-width:100%;width:100%;}
#mnHomeApplications .app-copy h2{font-size:clamp(39px,8vw,62px)!important;}
#mnHomeApplications .product-visual{width:100%;height:380px;min-height:380px;flex:0 0 380px;position:relative;overflow:hidden;}
#mnHomeApplications .visual-wrapper{position:absolute;top:6px!important;left:0;right:auto!important;width:1100px!important;transform:translateX(60px) scale(.63)!important;transform-origin:top left!important;}
#mnHomeApplications.is-app .visual-wrapper.active{transform:translateX(0) scale(.63)!important;}
#mnHomeApplications .harpoon-scene{height:680px;}
}
@media (max-width:600px){
#mnHomeApplications .app-stage{padding:17px 18px 24px!important;gap:13px!important;}
#mnHomeApplications .app-copy h2{font-size:41px!important;line-height:1.1!important;}
#mnHomeApplications .app-description{font-size:13px!important;line-height:1.5!important;}
#mnHomeApplications .app-actions{flex-wrap:wrap!important;gap:8px;}
#mnHomeApplications .product-visual{height:270px;min-height:270px;flex-basis:270px;}
#mnHomeApplications .visual-wrapper{transform:translateX(40px) scale(.37)!important;}
#mnHomeApplications.is-app .visual-wrapper.active{transform:translateX(0) scale(.37)!important;}
}
@media (prefers-reduced-motion:reduce){
#mnHomeApplications .choice .choice-poster{transition:none!important}
}
#mnHomeApplications .choice .choice-poster{opacity:0!important;filter:brightness(.88) saturate(.85) contrast(1.04)!important;
  object-position:center;transition:opacity .45s ease,transform .7s ease,filter .45s ease!important;}
#mnHomeApplications .choice:hover .choice-poster, #mnHomeApplications .choice:focus-visible .choice-poster{opacity:.88!important;transform:scale(1.015)!important;}
#mnHomeApplications .choice:after{background:linear-gradient(90deg,rgba(4,16,25,.92) 0%,rgba(4,16,25,.73) 44%,rgba(4,16,25,.33) 100%),
             linear-gradient(0deg,rgba(4,16,25,.23),transparent 66%)!important;}
#mnHomeApplications .choice[data-product="watershed"]:after{background:linear-gradient(90deg,rgba(4,16,25,.87) 0%,rgba(4,16,25,.62) 44%,rgba(4,16,25,.24) 100%),
             linear-gradient(0deg,rgba(4,16,25,.20),transparent 64%)!important;}
#mnHomeApplications .mobile-product-return{display:none}
@media (max-width:700px){
#mnHomeApplications .chooser{padding:0 20px 26px!important;}
#mnHomeApplications .chooser-title{margin-bottom:18px!important;}
#mnHomeApplications .chooser-title h2{font-size:clamp(28px,8vw,40px)!important;line-height:1.1!important;}
#mnHomeApplications .chooser-grid{grid-template-columns:1fr!important;gap:13px!important;}
#mnHomeApplications .choice{min-height:176px!important;padding:21px 22px!important;}
#mnHomeApplications .choice h3{font-size:28px!important;margin-bottom:9px!important;}
#mnHomeApplications .choice p{font-size:13px!important;line-height:1.48!important;max-width:91%;}
#mnHomeApplications .choice small{font-size:9px!important;letter-spacing:.12em!important;}
#mnHomeApplications .scene.is-app .chooser{display:none!important;}
#mnHomeApplications .scene.is-app .app-stage{position:relative!important;inset:auto!important;opacity:1!important;
    visibility:visible!important;pointer-events:auto!important;
    display:flex!important;flex-direction:column!important;align-items:stretch!important;
    overflow:visible!important;height:auto!important;min-height:0!important;
    width:100%!important;gap:25px!important;
    padding:34px 20px 46px!important;}
#mnHomeApplications .app-copy{width:100%!important;max-width:none!important;min-width:0!important;}
#mnHomeApplications .app-kicker{font-size:9px!important;line-height:1.6!important;letter-spacing:.1em!important;margin-bottom:10px!important;}
#mnHomeApplications .app-copy h2{font-size:clamp(39px,11vw,53px)!important;line-height:1.03!important;margin:0 0 16px!important;}
#mnHomeApplications .app-description{font-size:15px!important;line-height:1.58!important;margin-bottom:23px!important;}
#mnHomeApplications .app-feature-list{display:block!important;margin:0 0 25px!important;}
#mnHomeApplications .app-feature-list li{display:grid!important;grid-template-columns:28px minmax(0,1fr)!important;
    padding:12px 0!important;border-top:1px solid rgba(178,218,251,.17)!important;gap:0 6px!important;}
#mnHomeApplications .app-feature-list li .num{position:static!important;grid-row:1/3;font-size:11px!important;align-self:start;margin-top:4px;}
#mnHomeApplications .app-feature-list li strong{font-size:14px!important;line-height:1.4!important;}
#mnHomeApplications .app-feature-list li span{display:block!important;font-size:12px!important;line-height:1.5!important;margin-top:3px;color:#a8c1ce;}
#mnHomeApplications .app-actions{display:grid!important;grid-template-columns:1fr!important;gap:10px!important;}
#mnHomeApplications .app-actions .primary, #mnHomeApplications .app-actions .secondary{display:flex!important;justify-content:space-between!important;width:100%!important;
    min-height:48px!important;padding:0 17px!important;font-size:12px!important;}
#mnHomeApplications .mobile-product-return{display:block;margin-bottom:24px;}
#mnHomeApplications .mobile-return-button{background:transparent;color:#a2caeb;border:0;padding:0;font:500 11px "Montserrat",Arial,sans-serif;cursor:pointer;}
#mnHomeApplications .mobile-return-button:focus-visible{outline:2px solid #B2DAFB;outline-offset:7px;}
#mnHomeApplications .product-visual{display:block!important;position:relative!important;overflow:hidden!important;
    margin:0!important;padding:0!important;width:100%!important;
    min-height:0!important;flex:none!important;height:740px!important;}
#mnHomeApplications .visual-wrapper{opacity:0;position:relative!important;top:0!important;left:0!important;right:auto!important;
    transform:none!important;transform-origin:top left!important;
    transition:opacity .45s ease!important;}
#mnHomeApplications.is-app .visual-wrapper.active{opacity:1!important;transform:none!important;}
#mnHomeApplications .product-visual:has(#watershedVisual.active){overflow-x:auto!important;overflow-y:hidden!important;
    height:478px!important;max-height:478px!important;
    border-top:1px solid rgba(178,218,251,.2);
    scrollbar-width:thin;scrollbar-color:#367185 transparent;
    touch-action:pan-x pan-y;}
#mnHomeApplications #watershedVisual .watershed-shell{width:1100px!important;}
#mnHomeApplications .product-visual:has(#watershedVisual.active):after{content:"SWIPE TO EXPLORE DASHBOARD  →";position:sticky;left:10px;bottom:10px;display:inline-block;
    padding:6px 9px;background:#082434dc;color:#B2DAFB;
    font:500 9px "JetBrains Mono",monospace;letter-spacing:.1em;
    pointer-events:none;}
#mnHomeApplications .product-visual:has(#harpoonVisual.active){height:790px!important;overflow:visible!important;}
#mnHomeApplications #harpoonVisual .harpoon-scene{width:100%!important;height:780px!important;}
#mnHomeApplications #harpoonVisual .hp-table{position:absolute!important;top:0!important;left:0!important;right:0!important;
    width:100%!important;height:245px!important;
    overflow:hidden!important;}
#mnHomeApplications #harpoonVisual .hp-tabhead{height:35px!important;padding:0 10px!important;font-size:8px!important;}
#mnHomeApplications #harpoonVisual .hp-tabhead .hp-pill{font-size:7px!important;padding:4px!important;}
#mnHomeApplications #harpoonVisual .hp-table table{min-width:530px!important;font-size:8px!important;}
#mnHomeApplications #harpoonVisual .hp-table td{padding:9px 7px!important;}
#mnHomeApplications #harpoonVisual .hp-report{position:absolute!important;top:190px!important;left:4%!important;right:auto!important;
    width:96%!important;max-width:100%!important;height:550px!important;
    overflow:hidden!important;box-shadow:0 14px 40px rgba(0,0,0,.5)!important;}
#mnHomeApplications #harpoonVisual .hp-r-inner{padding:15px 16px 0!important;}
#mnHomeApplications #harpoonVisual .hp-r-title{font-size:17px!important;line-height:1.18!important;}
#mnHomeApplications #harpoonVisual .hp-r-subtitle{font-size:9px!important;}
#mnHomeApplications #harpoonVisual .report-graphic{min-height:160px!important;}
#mnHomeApplications #harpoonVisual .analysis-layout svg{height:auto!important;max-height:150px!important;}
#mnHomeApplications #harpoonVisual .hp-study-design{padding:9px!important;}
#mnHomeApplications #harpoonVisual .hp-r-analysis-foot{font-size:7px!important;line-height:1.35!important;}
}
@media (max-width:360px){
#mnHomeApplications .scene.is-app .app-stage{padding:27px 16px 35px!important;}
#mnHomeApplications .app-copy h2{font-size:38px!important;}
#mnHomeApplications .app-description{font-size:14px!important;}
}
@media (prefers-reduced-motion:reduce){
#mnHomeApplications .choice .choice-poster{transition:none!important;}
#mnHomeApplications .visual-wrapper{transition:none!important;}
}
@media (max-width:700px){
#mnHomeApplications .product-visual .visual-wrapper:not(.active){display:none!important;}
#mnHomeApplications .product-visual .visual-wrapper.active{display:block!important;}
#mnHomeApplications .product-visual:has(#harpoonVisual.active){height:748px!important;}
#mnHomeApplications #harpoonVisual .harpoon-scene{height:748px!important;}
}
#mnHomeApplications :where(h1,h2,h3,h4,h5,h6){color:inherit;text-transform:none}
#mnHomeApplications :where(ol,ul){margin:0;padding:0}
#mnHomeApplications :where(li){margin:0}
#mnHomeApplications :where(a,button){border-radius:0;box-shadow:none;text-transform:none}
#mnHomeApplications :where(table,thead,tbody,tr,th,td){background:transparent}
#mnHomeApplications .app-copy h2, #mnHomeApplications .chooser-title h2, #mnHomeApplications .choice h3{color:#F7FDFF}
#mnHomeApplications .hp-r-title{color:#1d3042}
#mnHomeApplications .choice{display:block;cursor:pointer;border-radius:0}
#mnHomeApplications .choice:focus-visible{outline:2px solid #B2DAFB;outline-offset:4px}

/* ======================================================================
   MANOLIN HOMEPAGE — APPLICATIONS STANDALONE LAYOUT
   Compact chooser by default. The section expands to the full product-view
   canvas only after Watershed or Harpoon is selected.
   ====================================================================== */
#mnHomeApplications {
  --mn-app-header-offset: 92px;
  position: relative;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  overflow: hidden;
  background: #06141F;
  color: #EDF3F4;
  font-family: "Source Sans 3", Arial, sans-serif;
  isolation: isolate;
}

#mnHomeApplications .applications-scene {
  position: relative;
  height: auto;
  min-height: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 70% 31%, rgba(66,148,179,.14), transparent 31%),
    linear-gradient(122deg, #05131e, #071924 52%, #0b2534);
  transition: min-height .45s ease, height .45s ease;
}

#mnHomeApplications .applications-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(166,209,225,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(166,209,225,.035) 1px, transparent 1px);
  background-size: 52px 52px;
  opacity: .65;
  mask-image: linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent);
}

#mnHomeApplications .applications-scene::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 89% 79% at 52% 40%, transparent 48%, rgba(2,10,16,.4));
}

/* Default chooser state: natural document height, no empty cinematic viewport. */
#mnHomeApplications .applications-scene:not(.is-app) .chooser {
  position: relative;
  inset: auto;
  z-index: 9;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: clamp(70px, 7vw, 104px) clamp(26px, 5vw, 95px) clamp(62px, 6vw, 88px);
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
  visibility: visible !important;
}

#mnHomeApplications .applications-scene:not(.is-app) .chooser-title {
  margin-bottom: 22px;
}

#mnHomeApplications .applications-scene:not(.is-app) .choice {
  min-height: 220px;
}

/* Selected product state: expand only when the detailed application is open. */
#mnHomeApplications .applications-scene.is-app {
  height: min(900px, calc(100svh - var(--mn-app-header-offset)));
  min-height: 760px;
  background: linear-gradient(180deg, #06141F, #091e2b) !important;
}

#mnHomeApplications .app-stage {
  z-index: 13;
}

#mnHomeApplications .applications-scene.is-app .chooser {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

#mnHomeApplications .applications-scene.is-app .app-stage {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

#mnHomeApplications .applications-scene.is-app .visual-wrapper.active {
  transform: translate(0, -45%);
  opacity: 1;
}

#mnHomeApplications .product-visual .visual-wrapper:not(.active) {
  visibility: hidden;
}

#mnHomeApplications .product-visual .visual-wrapper.active {
  visibility: visible;
}

@media (max-width: 850px) {
  #mnHomeApplications {
    --mn-app-header-offset: 82px;
  }

  #mnHomeApplications .applications-scene:not(.is-app) .chooser {
    padding: 64px 24px 60px;
  }

  #mnHomeApplications .applications-scene:not(.is-app) .choice {
    min-height: 190px;
  }
}

@media (max-width: 700px) {
  #mnHomeApplications {
    --mn-app-header-offset: 74px;
  }

  #mnHomeApplications .applications-scene:not(.is-app) .chooser {
    position: relative !important;
    padding: 58px 20px 52px !important;
  }

  #mnHomeApplications .applications-scene:not(.is-app) .choice {
    min-height: 176px !important;
  }

  #mnHomeApplications.mobile-product-open .applications-scene.is-app {
    position: relative !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    display: block !important;
  }

  #mnHomeApplications .applications-scene.is-app .chooser {
    display: none !important;
  }

  #mnHomeApplications .applications-scene.is-app .app-stage {
    position: relative !important;
    inset: auto !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #mnHomeApplications .applications-scene {
    transition: none !important;
  }
}


/*----------- 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 — LIVE
   Unified direction: locked narrative + normalized technical visual
   Desktop: sticky 5-stage scroll story
   Mobile: dedicated vertical narrative (not a compressed desktop experience)
   ======================================================================== */

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

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

/* ========================================================================
   MANOLIN HOMEPAGE — 3-STAGE NETWORK SECTION
   Exact Technology section CSS; outer background only changed.
   ======================================================================== */

:root {
  --mn-deep:#06141F;
  --mn-abyss:#071529;
  --mn-field:#0F2136;
  --mn-blue:#2896AC;
  --mn-light:#B2DAFB;
  --mn-heritage:#BED0DD;
  --mn-sonar:#7DE0F2;
  --mn-mist:#EDF3F4;
  --mn-gold:#D4A60D;
  --mn-coral:#E97972;
  --mn-display:"Montserrat",Arial,sans-serif;
  --mn-body:"Source Sans 3",Arial,sans-serif;
  --mn-mono:"JetBrains Mono",monospace;
}

.mn-network-demo,
.mn-network-demo *,
.mn-network-demo *::before,
.mn-network-demo *::after{box-sizing:border-box}

.mn-network-demo{
  min-height:100vh;
  background:
    radial-gradient(circle at 76% 14%,rgba(56,113,136,.105),transparent 31%),
    radial-gradient(circle at 24% 78%,rgba(35,76,93,.075),transparent 34%),
    linear-gradient(180deg,#071924 0%,#061721 100%);
  color:#f5fbfd;
  font-family:var(--mn-body);
}

.mn-network-story{position:relative;left:50%;width:100vw;margin-left:-50vw;height:360vh}
.mn-network-stage{position:sticky;top:0;height:100vh;overflow:hidden;isolation:isolate;border-top:1px solid rgba(190,208,221,.08);border-bottom:1px solid rgba(190,208,221,.11)}
.mn-network-stage::before,.mn-network-stage::after{content:"";position:absolute;top:0;bottom:0;width:1px;z-index:10;pointer-events:none;background:rgba(190,208,221,.12)}
.mn-network-stage::before{left:max(20px,calc((100vw - min(calc(100vw - 40px),1320px))/2))}
.mn-network-stage::after{right:max(20px,calc((100vw - min(calc(100vw - 40px),1320px))/2))}

.mn-network-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.mn-network-bg::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(178,218,251,.024) 1px,transparent 1px),linear-gradient(90deg,rgba(178,218,251,.020) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(180deg,rgba(0,0,0,.65),rgba(0,0,0,.25));-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.65),rgba(0,0,0,.25))}
.mn-network-bg::after{content:"";position:absolute;inset:0;opacity:.16;background-image:radial-gradient(circle at 78% 18%,rgba(255,255,255,.26) 0 .5px,transparent .7px),radial-gradient(circle at 22% 67%,rgba(255,255,255,.18) 0 .45px,transparent .65px);background-size:5px 5px,7px 7px;mix-blend-mode:soft-light}
.mn-bathy{position:absolute;inset:0;opacity:.18;z-index:0;pointer-events:none}
.mn-bathy svg{width:100%;height:100%;display:block}
.mn-bathy path{fill:none;stroke:rgba(40,150,172,.32);stroke-width:1}
.mn-bathy .warm{stroke:rgba(212,166,13,.22)}

.mn-network-shell{position:relative;z-index:3;width:min(calc(100% - 40px),1320px);height:100%;margin:0 auto;padding:clamp(58px,6vh,82px) clamp(34px,3.2vw,54px) clamp(40px,5vh,64px);display:grid;grid-template-columns:minmax(330px,.77fr) minmax(600px,1.23fr);gap:clamp(40px,4vw,66px);align-items:center}

/* Copy is a two-row grid so HubSpot font metrics can never collide with progress. */
.mn-network-copy{position:relative;min-height:520px;align-self:center;display:grid;grid-template-rows:minmax(0,1fr) auto}
.mn-copy-state{position:relative;grid-area:1/1;display:flex;flex-direction:column;justify-content:center;padding:0 0 30px!important;opacity:0;transform:translateY(20px);transition:opacity .45s ease,transform .45s ease;pointer-events:none}
.mn-copy-state.is-active{opacity:1;transform:none;pointer-events:auto}
.mn-network-kicker{display:flex!important;align-items:center!important;gap:0!important;margin:0 0 23px!important;padding:0!important;font:500 11px/1 var(--mn-mono)!important;letter-spacing:.17em!important;text-transform:uppercase!important;color:rgba(178,218,251,.88)!important}
.mn-network-kicker::before{content:none!important}

/* Explicitly beat HubSpot theme heading/paragraph rules. */
.mn-network-demo .mn-copy-state h2{
  margin:0!important;padding:0!important;max-width:590px!important;
  font-family:var(--mn-display)!important;font-size:clamp(42px,4.25vw,66px)!important;
  line-height:.985!important;letter-spacing:-.058em!important;font-weight:700!important;
  font-style:normal!important;text-transform:none!important;text-decoration:none!important;
  text-align:left!important;color:#F6FAFC!important;text-wrap:balance;
}
.mn-network-demo .mn-copy-state p{
  margin:25px 0 0!important;padding:0!important;max-width:545px!important;
  font-family:var(--mn-body)!important;font-size:clamp(18px,1.34vw,21px)!important;
  line-height:1.55!important;letter-spacing:0!important;font-weight:400!important;
  font-style:normal!important;text-transform:none!important;text-decoration:none!important;
  text-align:left!important;color:rgba(220,233,241,.72)!important;
}
.mn-network-demo .mn-network-mantra{margin:24px 0 0!important;padding:0!important;max-width:560px!important;font:600 14px/1.55 var(--mn-display)!important;letter-spacing:-.015em!important;text-align:left!important;color:#F6FAFC!important;text-decoration:none!important}
.mn-network-demo .mn-network-mantra i{font-style:normal!important;color:var(--mn-light)!important;padding:0 5px!important;text-decoration:none!important}

.mn-network-progress{position:relative!important;left:auto!important;bottom:auto!important;grid-row:2;grid-column:1;display:flex!important;align-items:center!important;gap:9px!important;width:min(100%,470px)!important;margin:0!important;padding:18px 0 0!important;border-top:1px solid rgba(190,208,221,.13)!important}
.mn-network-progress__count{width:58px;flex:0 0 58px;font:500 10px/1 var(--mn-mono)!important;letter-spacing:.12em!important;color:rgba(190,208,221,.54)!important}
.mn-network-progress__count strong{color:var(--mn-sonar)!important;font-weight:500!important}
.mn-network-progress__bars{display:flex!important;gap:8px!important;flex:1}
.mn-network-progress__bar{display:block!important;height:2px!important;flex:1!important;background:rgba(190,208,221,.14)!important;transition:background-color .3s ease}
.mn-network-progress__bar.is-on{background:rgba(178,218,251,.94)!important}

.mn-network-visual{position:relative;height:min(690px,79vh);min-height:560px;border:1px solid rgba(190,208,221,.14);background:radial-gradient(circle at 25% 78%,rgba(233,121,114,.07) 0%,rgba(233,121,114,0) 24%),radial-gradient(circle at 42% 56%,rgba(212,166,13,.07) 0%,rgba(212,166,13,0) 22%),radial-gradient(circle at 60% 30%,rgba(40,150,172,.07) 0%,rgba(40,150,172,0) 30%),rgba(255,255,255,.012);overflow:hidden}
.mn-network-visual::before{content:"SYSTEM TRACE // MANOLIN NETWORK";position:absolute;left:18px;top:14px;z-index:8;font:500 8px/1 var(--mn-mono);letter-spacing:.15em;color:rgba(178,218,251,.48)}
.mn-network-visual::after{content:"63.4308° N   10.3951° E";position:absolute;right:18px;top:14px;z-index:8;font:500 8px/1 var(--mn-mono);letter-spacing:.11em;color:rgba(178,218,251,.36)}
.mn-layer{position:absolute;inset:0;transition:opacity .55s ease,transform .55s ease,filter .55s ease}

/* State 1 */
.mn-source-scene{opacity:1}
.mn-pen{position:absolute;z-index:2;left:50%;top:52%;width:min(68%,560px);transform:translate(-50%,-50%);filter:drop-shadow(0 18px 28px rgba(0,0,0,.22));transition:opacity .55s ease,transform .55s ease,filter .55s ease}
.mn-pen img{display:block!important;width:100%!important;max-width:none!important;height:auto!important;margin:0!important;padding:0!important;border:0!important}
.mn-terminal{position:absolute;z-index:4;width:222px;border:1px solid rgba(178,218,251,.22);background:linear-gradient(180deg,rgba(7,21,41,.985),rgba(6,20,31,.98));box-shadow:0 0 0 1px rgba(255,255,255,.018) inset,0 18px 34px rgba(0,0,0,.16);overflow:hidden;transition:opacity .55s ease,transform .55s ease,filter .55s ease}
.mn-terminal__bar{height:27px;display:flex;align-items:center;justify-content:space-between;padding:0 9px;border-bottom:1px solid rgba(190,208,221,.10);background:rgba(255,255,255,.018)}
.mn-dots{display:flex;gap:5px}.mn-dots i{display:block;width:4px;height:4px;border-radius:50%;background:rgba(190,208,221,.44)}.mn-dots i:first-child{background:rgba(212,166,13,.85)}.mn-dots i:nth-child(2){background:rgba(233,121,114,.76)}
.mn-terminal__sys{font:500 7px/1 var(--mn-mono);letter-spacing:.12em;color:rgba(190,208,221,.40)}
.mn-terminal__body{padding:13px 14px 14px}
.mn-terminal__title{display:flex;align-items:center;gap:8px;margin-bottom:11px;font:600 10px/1 var(--mn-mono);letter-spacing:.10em;text-transform:uppercase;color:var(--mn-light)}
.mn-terminal__title svg{width:16px;height:16px;stroke:var(--mn-sonar);fill:none;stroke-width:1.5}
.mn-code{display:grid;gap:2px;font:500 9px/1.45 var(--mn-mono);color:rgba(220,233,241,.72);white-space:normal}
.mn-code-row{display:grid;grid-template-columns:76px 9px minmax(0,1fr);align-items:baseline;min-width:0}
.mn-code-row>span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mn-code .key{color:rgba(178,218,251,.72)}.mn-code .sep{color:rgba(190,208,221,.52)}.mn-code .num{color:rgba(212,166,13,.82)}.mn-code .good{color:rgba(125,224,242,.85)}
.mn-t-prod{left:3.5%;top:9%}.mn-t-feed{right:3.5%;top:12%}.mn-t-health{left:4.5%;bottom:8%}.mn-t-env{right:4%;bottom:9%}
.mn-connector{position:absolute;z-index:1;pointer-events:none}.mn-connector svg{width:100%;height:100%;display:block;overflow:visible}.mn-connector path{fill:none;stroke:rgba(125,224,242,.47);stroke-width:1.35;stroke-dasharray:5 6}.mn-connector circle{fill:#06141F;stroke:rgba(125,224,242,.76);stroke-width:1.2}
.mn-c-prod{left:24%;top:20%;width:21%;height:22%}.mn-c-feed{right:22%;top:23%;width:21%;height:20%}.mn-c-health{left:22%;bottom:18%;width:24%;height:20%}.mn-c-env{right:22%;bottom:19%;width:22%;height:20%}

/* State 2 */
.mn-foundation-scene{opacity:0;transform:translateY(18px) scale(.97)}
.mn-foundation-panel{position:absolute;left:50%;top:51%;width:min(89%,700px);transform:translate(-50%,-50%);border:1px solid rgba(178,218,251,.28);background:linear-gradient(180deg,rgba(7,21,41,.98),rgba(6,20,31,.96));box-shadow:0 24px 60px rgba(0,0,0,.28),0 0 0 1px rgba(255,255,255,.018) inset}
.mn-foundation-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;border-bottom:1px solid rgba(190,208,221,.10)}
.mn-foundation-brand{display:flex;align-items:center;gap:12px}.mn-foundation-logo{display:block!important;width:34px!important;max-width:none!important;height:24px!important;object-fit:contain!important;flex:0 0 34px;margin:0!important;padding:0!important;border:0!important}
.mn-foundation-name{font:700 17px/1 var(--mn-display);letter-spacing:-.02em}.mn-foundation-sub{margin-top:4px;font:500 8px/1 var(--mn-mono);letter-spacing:.13em;text-transform:uppercase;color:rgba(178,218,251,.55)}
.mn-live{font:500 8px/1 var(--mn-mono);letter-spacing:.12em;color:rgba(178,218,251,.55)}.mn-live::after{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--mn-sonar);margin-left:7px;box-shadow:0 0 0 4px rgba(125,224,242,.06)}
.mn-foundation-status{padding:11px 16px;border-bottom:1px solid rgba(190,208,221,.10);font:500 9px/1 var(--mn-mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(178,218,251,.68)}.mn-foundation-status b{font-weight:500;color:#fff}
.mn-foundation-table{display:grid;grid-template-columns:1.05fr 1.05fr 1.25fr 1.4fr}.mn-th,.mn-td{padding:10px 12px;border-bottom:1px solid rgba(190,208,221,.08);font:500 9px/1.35 var(--mn-mono)}.mn-th{color:var(--mn-light);background:rgba(255,255,255,.015)}.mn-td{color:rgba(222,235,242,.78)}.mn-td strong{font-weight:500;color:#fff}
.mn-signal-dot{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:7px;background:var(--mn-blue)}.mn-signal-dot.feed{background:rgba(212,166,13,.88)}.mn-signal-dot.health{background:rgba(233,121,114,.88)}.mn-signal-dot.env{background:rgba(125,224,242,.88)}
.mn-foundation-foot{padding:13px 16px;font:500 8px/1.4 var(--mn-mono);letter-spacing:.10em;text-transform:uppercase;color:rgba(190,208,221,.52)}
.mn-data-stream{position:absolute;left:50%;top:50%;width:86%;height:78%;transform:translate(-50%,-50%);opacity:.7}.mn-data-stream svg{width:100%;height:100%;display:block}.mn-data-stream path{fill:none;stroke:rgba(125,224,242,.24);stroke-width:1.2;stroke-dasharray:4 7}.mn-data-stream circle{fill:rgba(125,224,242,.82)}

/* State 3 */
.mn-output-scene{opacity:0;transform:translateY(20px)}
.mn-output-grid{position:absolute;inset:48px 24px 38px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-content:center}
.mn-output-card{min-height:360px;border:1px solid rgba(190,208,221,.20);background:linear-gradient(180deg,rgba(7,21,41,.96),rgba(6,20,31,.91));display:flex;flex-direction:column;overflow:hidden;box-shadow:0 18px 32px rgba(0,0,0,.14)}
.mn-output-bar{height:26px;display:flex;align-items:center;justify-content:space-between;padding:0 9px;border-bottom:1px solid rgba(190,208,221,.09)}
.mn-output-body{padding:17px 16px 16px;display:flex;flex-direction:column;flex:1;min-width:0}.mn-output-head{display:block!important;text-align:left!important}.mn-output-icon{display:none!important}
.mn-output-title{font:700 18px/1 var(--mn-display)!important;letter-spacing:-.025em!important;text-align:left!important;color:#F6FAFC!important}.mn-output-type{margin-top:4px!important;font:500 8px/1 var(--mn-mono)!important;letter-spacing:.13em!important;text-transform:uppercase!important;text-align:left!important;color:var(--mn-light)!important}
.mn-network-demo .mn-output-desc{margin:17px 0 0!important;padding:0!important;font-family:var(--mn-body)!important;font-size:14px!important;line-height:1.48!important;font-weight:400!important;letter-spacing:0!important;text-align:left!important;color:rgba(220,233,241,.68)!important;text-decoration:none!important}
.mn-output-tech{margin-top:auto;padding-top:15px;border-top:1px solid rgba(190,208,221,.10);min-height:132px;position:relative}.mn-output-tech--asset{display:flex;align-items:flex-end;justify-content:flex-start;min-height:132px;overflow:hidden}.mn-output-asset{display:block!important;width:auto!important;max-width:100%!important;object-fit:contain!important;object-position:left bottom!important;filter:drop-shadow(0 8px 18px rgba(0,0,0,.16));margin:0!important;padding:0!important;border:0!important}.mn-output-asset--salmon{height:100px!important;max-width:94%!important}.mn-output-asset--bag{height:112px!important;max-width:78%!important}
.mn-api-code{display:block;font:500 8px/1.45 var(--mn-mono)!important;color:rgba(220,233,241,.72)!important;white-space:normal!important;overflow:hidden}.mn-api-line{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mn-output-route{position:absolute;left:50%;top:31px;width:78%;height:31px;transform:translateX(-50%);opacity:.55}.mn-output-route svg{width:100%;height:100%}.mn-output-route path{fill:none;stroke:rgba(125,224,242,.45);stroke-width:1.2;stroke-dasharray:4 6}

.mn-stage-1 .mn-source-scene{opacity:1;transform:none}.mn-stage-1 .mn-foundation-scene{opacity:0;transform:translateY(18px) scale(.97)}.mn-stage-1 .mn-output-scene{opacity:0;transform:translateY(22px)}
.mn-stage-2 .mn-source-scene{opacity:.12;transform:scale(.985);filter:blur(.35px)}.mn-stage-2 .mn-pen{opacity:.10;transform:translate(-50%,-50%) scale(.94)}.mn-stage-2 .mn-terminal{opacity:.23;transform:scale(.96)}.mn-stage-2 .mn-foundation-scene{opacity:1;transform:none}.mn-stage-2 .mn-output-scene{opacity:0;transform:translateY(22px)}
.mn-stage-3 .mn-source-scene{opacity:0;transform:scale(.96)}.mn-stage-3 .mn-foundation-scene{opacity:.05;transform:translateY(-12px) scale(.94)}.mn-stage-3 .mn-output-scene{opacity:1;transform:none}
.mn-scroll-hint{position:absolute;right:22px;bottom:18px;z-index:9;font:500 8px/1 var(--mn-mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(178,218,251,.36);transition:opacity .3s ease}.mn-stage-3 .mn-scroll-hint{opacity:0}

/* ------------------------------------------------------------------------
   TABLET + MOBILE NARRATIVE FLOW
   On smaller screens the desktop sticky-scroll interaction becomes a
   normal vertical sequence: copy 01 -> visual 01 -> copy 02 -> visual 02
   -> copy 03 -> visual 03. This mirrors the simpler mobile storytelling
   pattern used elsewhere on the site and keeps every state readable.
   ------------------------------------------------------------------------ */
@media(max-width:1040px){
  .mn-network-story{
    height:auto;
  }

  .mn-network-stage{
    position:relative;
    top:auto;
    height:auto;
    min-height:0;
    overflow:hidden;
  }

  .mn-network-shell{
    height:auto;
    min-height:0;
    grid-template-columns:1fr;
    gap:24px;
    padding:82px 34px 72px;
    align-items:stretch;
  }

  /* Flatten the desktop copy/visual wrappers so each narrative state can
     appear directly beside its corresponding visual in document flow. */
  .mn-network-copy,
  .mn-network-visual{
    display:contents;
  }

  .mn-network-visual::before,
  .mn-network-visual::after{
    display:none;
  }

  .mn-copy-state{
    position:relative;
    grid-area:auto;
    display:flex!important;
    opacity:1!important;
    transform:none!important;
    pointer-events:auto!important;
    min-height:0;
    padding:0 0 4px!important;
  }

  .mn-copy-state[data-copy="1"]{order:1}
  .mn-source-scene{order:2}
  .mn-copy-state[data-copy="2"]{order:3;margin-top:34px;padding-top:48px!important;border-top:1px solid rgba(190,208,221,.12)}
  .mn-foundation-scene{order:4}
  .mn-copy-state[data-copy="3"]{order:5;margin-top:34px;padding-top:48px!important;border-top:1px solid rgba(190,208,221,.12)}
  .mn-output-scene{order:6}

  .mn-network-progress,
  .mn-scroll-hint{
    display:none!important;
  }

  /* Each desktop visual state becomes its own framed mobile panel. */
  .mn-layer,
  .mn-stage-1 .mn-layer,
  .mn-stage-2 .mn-layer,
  .mn-stage-3 .mn-layer{
    position:relative!important;
    inset:auto!important;
    width:100%;
    opacity:1!important;
    transform:none!important;
    filter:none!important;
    border:1px solid rgba(190,208,221,.14);
    background:
      radial-gradient(circle at 25% 78%,rgba(233,121,114,.055) 0%,rgba(233,121,114,0) 24%),
      radial-gradient(circle at 42% 56%,rgba(212,166,13,.05) 0%,rgba(212,166,13,0) 22%),
      radial-gradient(circle at 60% 30%,rgba(40,150,172,.055) 0%,rgba(40,150,172,0) 30%),
      rgba(255,255,255,.012);
    overflow:hidden;
  }

  .mn-layer::before{
    content:"SYSTEM TRACE // MANOLIN NETWORK";
    position:absolute;
    left:16px;
    top:13px;
    z-index:9;
    font:500 7px/1 var(--mn-mono);
    letter-spacing:.14em;
    color:rgba(178,218,251,.46);
    pointer-events:none;
  }

  .mn-layer::after{
    content:"63.4308° N  10.3951° E";
    position:absolute;
    right:16px;
    top:13px;
    z-index:9;
    font:500 7px/1 var(--mn-mono);
    letter-spacing:.10em;
    color:rgba(178,218,251,.32);
    pointer-events:none;
  }

  .mn-source-scene{
    height:650px;
  }

  .mn-foundation-scene{
    height:520px;
  }

  .mn-output-scene{
    min-height:0;
    padding:48px 18px 18px;
  }

  .mn-output-grid{
    position:relative;
    inset:auto;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
    align-content:start;
  }

  .mn-output-route{
    display:none;
  }

  .mn-output-card{
    min-height:330px;
  }

  .mn-bathy{
    opacity:.13;
  }
}

/* ------------------------------------------------------------------------
   PHONE LAYOUT
   ------------------------------------------------------------------------ */
@media(max-width:767px){
  .mn-network-stage::before{
    left:max(12px,calc((100vw - min(calc(100vw - 24px),1320px))/2));
  }

  .mn-network-stage::after{
    right:max(12px,calc((100vw - min(calc(100vw - 24px),1320px))/2));
  }

  .mn-network-shell{
    width:min(calc(100% - 24px),1320px);
    padding:68px 18px 62px;
    gap:22px;
  }

  .mn-network-kicker{
    margin-bottom:18px!important;
    font-size:10px!important;
  }

  .mn-network-demo .mn-copy-state h2{
    max-width:100%!important;
    font-size:clamp(38px,11vw,50px)!important;
    line-height:.99!important;
    letter-spacing:-.055em!important;
  }

  .mn-network-demo .mn-copy-state p{
    margin-top:20px!important;
    max-width:100%!important;
    font-size:18px!important;
    line-height:1.48!important;
  }

  .mn-network-demo .mn-network-mantra{
    margin-top:20px!important;
    max-width:100%!important;
    font-size:13px!important;
    line-height:1.65!important;
  }

  .mn-copy-state[data-copy="2"],
  .mn-copy-state[data-copy="3"]{
    margin-top:28px;
    padding-top:40px!important;
  }

  .mn-layer::before{
    left:12px;
    top:12px;
    font-size:6px;
  }

  .mn-layer::after{
    right:12px;
    top:12px;
    font-size:6px;
  }

  /* State 1: retain the four-system / pen composition, but tighten the
     terminal typography so nothing clips on narrow phones. */
  .mn-source-scene{
    height:680px;
  }

  .mn-terminal{
    width:calc(50% - 12px);
  }

  .mn-terminal__bar{
    height:24px;
    padding:0 7px;
  }

  .mn-terminal__body{
    padding:10px 9px 11px;
  }

  .mn-terminal__title{
    gap:5px;
    margin-bottom:8px;
    font-size:7.6px;
    letter-spacing:.08em;
  }

  .mn-terminal__title svg{
    width:13px;
    height:13px;
    flex:0 0 13px;
  }

  .mn-terminal__sys{
    font-size:6px;
  }

  .mn-code{
    gap:1px;
    font-size:6.8px;
    line-height:1.42;
  }

  .mn-code-row{
    grid-template-columns:52px 6px minmax(0,1fr);
  }

  .mn-t-prod{left:8px;top:42px}
  .mn-t-feed{right:8px;top:42px}
  .mn-t-health{left:8px;bottom:38px}
  .mn-t-env{right:8px;bottom:38px}

  .mn-pen{
    width:92%;
    top:51%;
  }

  .mn-connector{
    display:none;
  }

  /* State 2: keep the actual data-foundation terminal readable instead of
     hiding arbitrary cells from the flat grid. */
  .mn-foundation-scene{
    height:500px;
  }

  .mn-foundation-panel{
    top:52%;
    width:calc(100% - 16px);
  }

  .mn-foundation-head{
    gap:8px;
    padding:12px 11px;
  }

  .mn-foundation-brand{
    gap:8px;
    min-width:0;
  }

  .mn-foundation-logo{
    width:28px!important;
    height:20px!important;
    flex-basis:28px;
  }

  .mn-foundation-name{
    font-size:13px;
    white-space:nowrap;
  }

  .mn-foundation-sub{
    margin-top:3px;
    font-size:6.3px;
    letter-spacing:.10em;
    white-space:nowrap;
  }

  .mn-live{
    display:none;
  }

  .mn-foundation-status{
    padding:9px 10px;
    font-size:7px;
    line-height:1.6;
    letter-spacing:.09em;
    white-space:normal;
  }

  .mn-foundation-table{
    grid-template-columns:1fr 1fr;
  }

  .mn-foundation-table > :nth-child(4n+3),
  .mn-foundation-table > :nth-child(4n+4){
    display:none;
  }

  .mn-th,
  .mn-td{
    min-width:0;
    padding:8px 8px;
    font-size:7px;
    line-height:1.3;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .mn-signal-dot{
    width:5px;
    height:5px;
    margin-right:5px;
  }

  .mn-foundation-foot{
    padding:10px;
    font-size:6.5px;
    line-height:1.5;
    letter-spacing:.07em;
  }

  .mn-data-stream{
    width:96%;
    height:84%;
  }

  /* State 3: use the same simple stacked card rhythm as the Prefect mobile
     reference rather than forcing three narrow columns into the viewport. */
  .mn-output-scene{
    padding:44px 10px 12px;
  }

  .mn-output-grid{
    grid-template-columns:1fr;
    gap:10px;
  }

  .mn-output-card{
    min-height:268px;
  }

  .mn-output-body{
    padding:15px 14px 14px;
  }

  .mn-output-title{
    font-size:20px!important;
  }

  .mn-output-type{
    font-size:7.5px!important;
  }

  .mn-network-demo .mn-output-desc{
    margin-top:14px!important;
    font-size:15px!important;
    line-height:1.46!important;
  }

  .mn-output-tech,
  .mn-output-tech--asset{
    min-height:92px;
    padding-top:12px;
  }

  .mn-output-asset--salmon{
    height:76px!important;
  }

  .mn-output-asset--bag{
    height:88px!important;
  }

  .mn-api-code{
    font-size:7.5px!important;
  }
}
@keyframes blink{50%{opacity:0}}

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


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

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

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

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

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

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

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

  position: relative;
  left: 50%;

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

  overflow: hidden;

  color: #f2fcff;

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

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

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

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

  opacity: 0.48;
  pointer-events: none;

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

  background-size: 48px 48px;
}


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

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

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

  margin: 0 auto;
}


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

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

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

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

  margin-bottom: 32px !important;
}

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

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

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

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

  margin:
    10px
    0
    0 !important;

  padding: 0 !important;

  color: #f5fcff !important;

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

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

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

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

  margin:
    0
    0
    4px !important;

  padding: 0 !important;

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

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

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

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


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

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

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

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

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


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

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

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

  display: block !important;

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

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

  cursor: pointer !important;

  border: 0 !important;

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

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

  border-radius: 0 !important;

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

  background-image:
    none !important;

  box-shadow:
    none !important;

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

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

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

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

  transform: none !important;

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

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

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

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

  padding: 0 !important;

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

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

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

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

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

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

  color: inherit !important;

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

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

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

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

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

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

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

  color:
    #ffffff !important;
}

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

  color:
    #ffffff !important;

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


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

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

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

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

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

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

  grid-template-columns:
    0.87fr
    1.13fr;

  min-height: 613px;

  opacity: 0;

  transform:
    translateY(
      5px
    );

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

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

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

  transform:
    translateY(
      0
    );

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

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

    transform:
      translateY(
        8px
      );
  }

  to {
    opacity: 1;

    transform:
      translateY(
        0
      );
  }
}


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

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

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

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

  margin-bottom: 17px;
}

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

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

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

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

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

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

  margin:
    11px
    0
    15px !important;

  padding: 0 !important;

  color:
    #f5fcff !important;

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

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

  text-align: left !important;
}

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

  padding: 0 !important;

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

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

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


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

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

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

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

  grid-template-columns:
    45px
    1fr;

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

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

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

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

  font-size: 9px;
}

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

  color:
    #effbff;

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

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

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

  margin-top: 5px;

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

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

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


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

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

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

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

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

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

  transition:
    transform 180ms ease;
}

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


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

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

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

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

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

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

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

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

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

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

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

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

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

  display: grid;

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

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

  padding: 12px;

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

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

  background: transparent;
}

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

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


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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

  width: 85%;
  height: 78%;
}

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

  width: 9px;
  height: 9px;

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

  border-radius: 50%;

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

  width: 1px;
  height: 34px;

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

  transform:
    rotate(
      24deg
    );

  transform-origin: top;
}

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

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

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

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

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

  margin-top: 5px;

  color:
    #f2fbfd !important;

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

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

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

  margin-top: 3px;

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

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

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

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

  grid-template-columns:
    1fr
    1fr;

  gap:
    6px
    10px;

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

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

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

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

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

  margin-top: 3px;

  color:
    #effbff !important;

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

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

  overflow-wrap:
    anywhere !important;
}


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

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

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

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

  position: absolute;
  inset: 0;

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

  background-size:
    100%
    24px;
}

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

  width: 100%;
  height: 100%;
}


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

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

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

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

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

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

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

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

  margin-top: 4px;

  color:
    #f4fcff !important;

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

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

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

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

  grid-template-columns:
    1fr
    auto;

  gap: 10px;
  align-items: center;

  padding:
    7px
    0;

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

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

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

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

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

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

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

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


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

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

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

  margin-top: 14px;

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

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

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

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

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

  background: transparent;
}

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

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

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

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

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

  margin-top: 6px;

  color:
    #f4fcff !important;

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

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

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

  margin-top: 5px;

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

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

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


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

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

  padding:
    19px
    7px
    0;

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

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

  flex: 1;

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

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

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

  width: 1px;
  height: 18px;

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

  background-color:
    transparent !important;

  background-image:
    none !important;

  box-shadow:
    none !important;
}

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

  border:
    0 !important;

  border-collapse:
    collapse !important;
}

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

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

  border:
    0 !important;

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

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

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

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

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

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

  text-align:
    right !important;
}


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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

    gap:
      16px !important;
  }

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

    font-size:
      60px !important;
  }

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

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

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

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


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

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

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

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

    font-size:
      46px !important;

    letter-spacing:
      -0.064em !important;

    line-height:
      1 !important;
  }

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

    font-size:
      15px !important;
  }

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

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

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

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

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

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

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

    grid-template-columns:
      1fr;
  }

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

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

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

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


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

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

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.001ms !important;
  }
}


/* ======================================================================
   MANOLIN HOMEPAGE — THE INTELLIGENCE PLATFORM LAYER
   Centered platform header + Harpoon network orb + three capability cards.
   Designed to flow directly into the Homepage Applications section.
   No section rails.
   ====================================================================== */

#mnIntelligenceLayer {
  --mn-il-deep: #06141F;
  --mn-il-deep-2: #071924;
  --mn-il-mist: #EDF3F4;
  --mn-il-ice: #B2DAFB;
  --mn-il-marine: #2896AC;
  --mn-il-teal: #68D7C7;
  --mn-il-structure: #BED0DD;
  --mn-il-line: rgba(184, 222, 235, 0.14);
  --mn-il-line-strong: rgba(184, 222, 235, 0.25);
  --mn-il-display: "Montserrat", Arial, sans-serif;
  --mn-il-body: "Source Sans 3", Arial, sans-serif;
  --mn-il-mono: "JetBrains Mono", ui-monospace, monospace;

  position: relative;
  left: 50%;
  width: 100vw;
  max-width: none;
  margin-left: -50vw;
  overflow: hidden;
  isolation: isolate;

  color: var(--mn-il-mist);
  font-family: var(--mn-il-body);

  background:
    linear-gradient(
      180deg,
      rgba(6, 20, 31, 0) 0%,
      rgba(6, 20, 31, 0) 72%,
      #06141F 100%
    ),
    radial-gradient(
      circle at 70% 31%,
      rgba(66, 148, 179, 0.14),
      transparent 31%
    ),
    linear-gradient(
      122deg,
      #05131e,
      #071924 52%,
      #0b2534
    );
}

#mnIntelligenceLayer,
#mnIntelligenceLayer *,
#mnIntelligenceLayer *::before,
#mnIntelligenceLayer *::after {
  box-sizing: border-box;
}

/* Match the Applications section's quiet technical grid. */
#mnIntelligenceLayer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;

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

  background-size: 52px 52px;
  opacity: 0.65;

  mask-image:
    linear-gradient(
      180deg,
      transparent,
      #000 7%,
      #000 94%,
      transparent
    );

  -webkit-mask-image:
    linear-gradient(
      180deg,
      transparent,
      #000 7%,
      #000 94%,
      transparent
    );
}

/* Same restrained vignette used by the Applications section. */
#mnIntelligenceLayer::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;

  background:
    radial-gradient(
      ellipse 89% 79% at 52% 40%,
      transparent 48%,
      rgba(2, 10, 16, 0.4)
    );
}

#mnIntelligenceLayer .mn-il-container {
  position: relative;
  z-index: 2;

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

  padding:
    clamp(58px, 5.2vw, 76px)
    clamp(24px, 3vw, 40px)
    0;
}

/* ----------------------------------------------------------------------
   CENTERED INTRO
   ---------------------------------------------------------------------- */

#mnIntelligenceLayer .mn-il-header {
  width: min(940px, 100%);
  margin: 0 auto;
  text-align: center;
}

#mnIntelligenceLayer .mn-il-eyebrow {
  margin: 0 0 12px;

  color: var(--mn-il-ice);

  font: 500 10px/1.2 var(--mn-il-mono);
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

#mnIntelligenceLayer .mn-il-title {
  max-width: 980px;
  margin: 0 auto;

  color: #F7FDFF;

  font-family: var(--mn-il-display);
  font-size: clamp(38px, 4vw, 56px);
  font-weight: 700;
  line-height: 0.99;
  letter-spacing: -0.058em;

  text-wrap: balance;
}

/* ----------------------------------------------------------------------
   HARPOON NETWORK ORB
   Same node sphere logic as the Harpoon hero; side input paths removed.
   ---------------------------------------------------------------------- */

#mnIntelligenceLayer .mn-il-orb-wrap {
  position: relative;

  width: min(235px, 28vw);
  aspect-ratio: 1;
  margin:
    clamp(18px, 1.8vw, 26px)
    auto
    clamp(28px, 2.8vw, 38px);

  pointer-events: none;
}

#mnIntelligenceLayer .mn-il-orb-wrap::before {
  content: "";
  position: absolute;
  inset: 18%;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(41, 150, 172, 0.13),
      rgba(41, 150, 172, 0.03) 46%,
      transparent 72%
    );

  filter: blur(12px);
}

#mnIntelligenceLayer .mn-il-orb-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ----------------------------------------------------------------------
   THREE CAPABILITY CARDS
   Faded technical cards at rest; brighter on desktop hover/focus.
   ---------------------------------------------------------------------- */

#mnIntelligenceLayer .mn-il-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.55vw, 22px);
}

#mnIntelligenceLayer .mn-il-card {
  position: relative;
  min-width: 0;
  min-height: 330px;
  overflow: hidden;

  display: flex;
  flex-direction: column;

  border: 1px solid rgba(190, 208, 221, 0.11);

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.018),
      rgba(255, 255, 255, 0.007)
    ),
    rgba(6, 20, 31, 0.36);

  transition:
    background-color 520ms ease,
    border-color 520ms ease,
    transform 620ms cubic-bezier(.22, 1, .36, 1),
    box-shadow 620ms cubic-bezier(.22, 1, .36, 1);
}

#mnIntelligenceLayer .mn-il-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background:
    radial-gradient(
      circle at 50% 27%,
      rgba(41, 150, 172, 0.055),
      transparent 48%
    );

  opacity: 0.44;

  transition:
    opacity 520ms ease,
    background 520ms ease;
}

#mnIntelligenceLayer .mn-il-card:hover,
#mnIntelligenceLayer .mn-il-card:focus-within {
  border-color: rgba(178, 218, 251, 0.27);

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.032),
      rgba(255, 255, 255, 0.012)
    ),
    rgba(8, 29, 41, 0.72);

  transform: translateY(-3px);

  box-shadow:
    0 22px 64px rgba(0, 0, 0, 0.12);
}

#mnIntelligenceLayer .mn-il-card:hover::before,
#mnIntelligenceLayer .mn-il-card:focus-within::before {
  opacity: 0.9;

  background:
    radial-gradient(
      circle at 50% 26%,
      rgba(41, 150, 172, 0.11),
      transparent 52%
    );
}

#mnIntelligenceLayer .mn-il-card-visual {
  position: relative;
  z-index: 2;

  height: 156px;
  flex: 0 0 156px;

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

  padding: 20px 26px 4px;

  opacity: 0.46;
  filter: saturate(0.78);

  transition:
    opacity 520ms ease,
    filter 520ms ease,
    transform 620ms cubic-bezier(.22, 1, .36, 1);
}

#mnIntelligenceLayer .mn-il-card:hover .mn-il-card-visual,
#mnIntelligenceLayer .mn-il-card:focus-within .mn-il-card-visual {
  opacity: 0.95;
  filter: saturate(1);
  transform: translateY(-2px);
}

#mnIntelligenceLayer .mn-il-card-copy {
  position: relative;
  z-index: 3;

  margin-top: auto;
  padding: 18px 24px 22px;

  border-top: 1px solid rgba(190, 208, 221, 0.10);
}

#mnIntelligenceLayer .mn-il-card-index {
  display: block;
  margin-bottom: 8px;

  color: var(--mn-il-ice);

  font: 500 9px/1.2 var(--mn-il-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

#mnIntelligenceLayer .mn-il-card-title {
  margin: 0 0 8px;

  color: #F7FDFF;

  font-family: var(--mn-il-display);
  font-size: clamp(20px, 1.55vw, 25px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.042em;
}

#mnIntelligenceLayer .mn-il-card-body {
  margin: 0;

  color: rgba(237, 243, 244, 0.60);

  font-size: 13.5px;
  line-height: 1.5;
}

/* ----------------------------------------------------------------------
   CONNECT VISUAL
   Multiple source nodes converge into a connected population structure.
   Particle motion is started only while the card is hovered/focused.
   ---------------------------------------------------------------------- */

#mnIntelligenceLayer .mn-il-connect-svg {
  width: 100%;
  max-width: 330px;
  height: 130px;
  overflow: visible;
}

#mnIntelligenceLayer .mn-il-connect-guide {
  fill: none;
  stroke: rgba(190, 208, 221, 0.18);
  stroke-width: 1;
}

#mnIntelligenceLayer .mn-il-connect-link {
  fill: none;
  stroke: rgba(41, 150, 172, 0.42);
  stroke-width: 1.15;
}

#mnIntelligenceLayer .mn-il-connect-core {
  fill: rgba(41, 150, 172, 0.08);
  stroke: rgba(41, 150, 172, 0.60);
  stroke-width: 1.2;
}

#mnIntelligenceLayer .mn-il-connect-node {
  fill: #A2CAEB;
}

#mnIntelligenceLayer .mn-il-connect-node.brand {
  fill: #2996AC;
}

#mnIntelligenceLayer .mn-il-connect-node.teal {
  fill: #68D7C7;
}

#mnIntelligenceLayer .mn-il-connect-particle {
  fill: #B2DAFB;
  filter: drop-shadow(0 0 5px rgba(178, 218, 251, 0.72));
}

/* ----------------------------------------------------------------------
   MODEL VISUAL
   Simple fish growth / expected performance curve.
   The bright curve draws on hover; a quiet ghost remains visible at rest.
   ---------------------------------------------------------------------- */

#mnIntelligenceLayer .mn-il-model-svg {
  width: 100%;
  max-width: 345px;
  height: 132px;
  overflow: visible;
}

#mnIntelligenceLayer .mn-il-model-axis,
#mnIntelligenceLayer .mn-il-model-grid {
  fill: none;
  stroke: rgba(190, 208, 221, 0.12);
  stroke-width: 1;
}

#mnIntelligenceLayer .mn-il-model-axis {
  stroke: rgba(190, 208, 221, 0.24);
}

#mnIntelligenceLayer .mn-il-model-ghost {
  fill: none;
  stroke: rgba(178, 218, 251, 0.18);
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#mnIntelligenceLayer .mn-il-model-line {
  fill: none;
  stroke: #B2DAFB;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;

  stroke-dasharray: 430;
  stroke-dashoffset: 430;
}

#mnIntelligenceLayer .mn-il-card--model:hover .mn-il-model-line,
#mnIntelligenceLayer .mn-il-card--model:focus-within .mn-il-model-line {
  animation:
    mnIlGrowthDraw
    1450ms
    cubic-bezier(.22, 1, .36, 1)
    forwards;
}

#mnIntelligenceLayer .mn-il-model-dot {
  fill: #68D7C7;
  opacity: 0;
  transform-origin: center;
}

#mnIntelligenceLayer .mn-il-card--model:hover .mn-il-model-dot,
#mnIntelligenceLayer .mn-il-card--model:focus-within .mn-il-model-dot {
  animation:
    mnIlModelDot
    480ms
    ease
    1120ms
    forwards;
}

#mnIntelligenceLayer .mn-il-model-label {
  fill: rgba(178, 218, 251, 0.60);
  font: 500 8px var(--mn-il-mono);
  letter-spacing: 0.08em;
}

@keyframes mnIlGrowthDraw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes mnIlModelDot {
  from {
    opacity: 0;
    transform: scale(0.55);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ----------------------------------------------------------------------
   REPORT & ANALYZE VISUAL
   Manolin report-like evidence sheet. Hover lifts the sheet and reveals
   a restrained metric strip.
   ---------------------------------------------------------------------- */

#mnIntelligenceLayer .mn-il-report-stage {
  position: relative;

  width: min(300px, 100%);
  height: 132px;
}

#mnIntelligenceLayer .mn-il-report-page {
  position: absolute;
  left: 50%;
  top: 2px;

  width: 212px;
  height: 132px;

  transform: translateX(-50%);

  overflow: hidden;

  border: 1px solid rgba(196, 214, 222, 0.72);
  background: #F7FAFB;
  color: #183245;

  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.16);

  transition:
    transform 680ms cubic-bezier(.22, 1, .36, 1),
    box-shadow 680ms cubic-bezier(.22, 1, .36, 1);
}

#mnIntelligenceLayer .mn-il-card--analysis:hover .mn-il-report-page,
#mnIntelligenceLayer .mn-il-card--analysis:focus-within .mn-il-report-page {
  transform:
    translateX(-50%)
    translateY(-7px);

  box-shadow:
    0 22px 48px rgba(0, 0, 0, 0.22);
}

#mnIntelligenceLayer .mn-il-report-top {
  height: 19px;

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

  padding: 0 11px;

  border-bottom: 1px solid #DCE6EA;
}

#mnIntelligenceLayer .mn-il-report-top span {
  color: #2896AC;

  font: 600 5.5px/1 var(--mn-il-mono);
  letter-spacing: 0.10em;
}

#mnIntelligenceLayer .mn-il-report-top i {
  width: 29px;
  height: 1px;

  background: #BED0DD;
}

#mnIntelligenceLayer .mn-il-report-content {
  padding: 12px 12px 10px;
}

#mnIntelligenceLayer .mn-il-report-kicker {
  color: #6C8794;

  font: 600 5px/1 var(--mn-il-mono);
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

#mnIntelligenceLayer .mn-il-report-title {
  margin: 5px 0 9px;

  color: #183245;

  font-family: var(--mn-il-display);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.035em;
}

#mnIntelligenceLayer .mn-il-report-rule {
  height: 1px;
  margin-bottom: 8px;

  background: #DCE6EA;
}

#mnIntelligenceLayer .mn-il-report-chart {
  position: relative;
  height: 50px;

  border-left: 1px solid #CBD9E0;
  border-bottom: 1px solid #CBD9E0;

  background-image:
    linear-gradient(
      rgba(213, 224, 229, 0.42) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(213, 224, 229, 0.36) 1px,
      transparent 1px
    );

  background-size: 100% 16px, 41px 100%;
}

#mnIntelligenceLayer .mn-il-report-chart svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#mnIntelligenceLayer .mn-il-report-chart path {
  fill: none;
  stroke: #2896AC;
  stroke-width: 2;
  stroke-linecap: round;
}

#mnIntelligenceLayer .mn-il-report-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;

  margin-top: 6px;

  opacity: 0;
  transform: translateY(5px);

  transition:
    opacity 520ms ease 120ms,
    transform 620ms cubic-bezier(.22, 1, .36, 1) 120ms;
}

#mnIntelligenceLayer .mn-il-card--analysis:hover .mn-il-report-metrics,
#mnIntelligenceLayer .mn-il-card--analysis:focus-within .mn-il-report-metrics {
  opacity: 1;
  transform: translateY(0);
}

#mnIntelligenceLayer .mn-il-report-metrics div {
  padding-top: 6px;

  border-top: 1px solid #DFE8EC;
}

#mnIntelligenceLayer .mn-il-report-metrics small {
  display: block;

  color: #78909C;

  font: 600 4.8px/1 var(--mn-il-mono);
  letter-spacing: 0.07em;
}

#mnIntelligenceLayer .mn-il-report-metrics b {
  display: block;
  margin-top: 3px;

  color: #1D4255;

  font-family: var(--mn-il-display);
  font-size: 8px;
  font-weight: 700;
}


/* ----------------------------------------------------------------------
   PLATFORM → APPLICATIONS HANDOFF
   Faint structural trace only. No box, divider band, or hard section end.
   ---------------------------------------------------------------------- */

#mnIntelligenceLayer .mn-il-handoff {
  position: relative;
  z-index: 2;

  width: min(880px, 82%);
  height: 112px;

  margin:
    clamp(22px, 2.4vw, 34px)
    auto
    0;

  opacity: 0.48;

  pointer-events: none;
}

#mnIntelligenceLayer .mn-il-handoff::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;

  width: 1px;
  height: 34px;

  transform: translateX(-50%);

  background:
    linear-gradient(
      180deg,
      rgba(178, 218, 251, 0.26),
      rgba(178, 218, 251, 0)
    );
}

#mnIntelligenceLayer .mn-il-handoff-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

#mnIntelligenceLayer .mn-il-handoff-path,
#mnIntelligenceLayer .mn-il-handoff-stem {
  fill: none;

  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

#mnIntelligenceLayer .mn-il-handoff-path {
  stroke: rgba(178, 218, 251, 0.16);
  stroke-dasharray: 3 8;

  animation:
    mnIlHandoffDash
    18s
    linear
    infinite;
}

#mnIntelligenceLayer .mn-il-handoff-stem {
  stroke: rgba(104, 215, 199, 0.22);
}

#mnIntelligenceLayer .mn-il-handoff-particle {
  opacity: 0.76;
}

#mnIntelligenceLayer .mn-il-handoff-particle[data-mn-il-path] {
  transform-box: fill-box;
  transform-origin: center;
}

#mnIntelligenceLayer .mn-il-handoff-particle--ice {
  fill: #B2DAFB;
}

#mnIntelligenceLayer .mn-il-handoff-particle--marine {
  fill: #2896AC;
}

#mnIntelligenceLayer .mn-il-handoff-particle--teal {
  fill: #68D7C7;
}

#mnIntelligenceLayer .mn-il-handoff-particle--ghost {
  fill: rgba(190, 208, 221, 0.62);
  opacity: 0.42;
}

#mnIntelligenceLayer .mn-il-handoff-node-glow {
  fill: rgba(104, 215, 199, 0.08);

  animation:
    mnIlHandoffPulse
    3.8s
    ease-in-out
    infinite;
}

#mnIntelligenceLayer .mn-il-handoff-node {
  fill: #68D7C7;
  opacity: 0.72;

  filter:
    drop-shadow(
      0 0 8px
      rgba(104, 215, 199, 0.26)
    );
}

@keyframes mnIlHandoffDash {
  to {
    stroke-dashoffset: -44;
  }
}

@keyframes mnIlHandoffPulse {
  0%,
  100% {
    opacity: 0.25;
    transform: scale(0.82);
    transform-origin: 450px 72px;
  }

  50% {
    opacity: 0.78;
    transform: scale(1.16);
    transform-origin: 450px 72px;
  }
}

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

@media (max-width: 980px) {
  #mnIntelligenceLayer .mn-il-container {
    padding-left: 24px;
    padding-right: 24px;
  }

  #mnIntelligenceLayer .mn-il-card {
    min-height: 350px;
  }

  #mnIntelligenceLayer .mn-il-card-visual {
    height: 168px;
    flex-basis: 168px;
    padding-left: 20px;
    padding-right: 20px;
  }

  #mnIntelligenceLayer .mn-il-card-copy {
    padding-left: 22px;
    padding-right: 22px;
  }
}

/* ----------------------------------------------------------------------
   MOBILE
   One column. Hover-only effects and card animations are intentionally
   disabled; visuals remain fully legible without interaction.
   ---------------------------------------------------------------------- */

@media (max-width: 760px) {
  #mnIntelligenceLayer .mn-il-container {
    width: min(calc(100% - 24px), 1320px);

    padding:
      74px
      12px
      82px;
  }

  #mnIntelligenceLayer .mn-il-header {
    text-align: left;
  }

  #mnIntelligenceLayer .mn-il-eyebrow {
    font-size: 9px;
  }

  #mnIntelligenceLayer .mn-il-title {
    font-size: clamp(38px, 10.5vw, 52px);
    line-height: 1.01;
  }

  #mnIntelligenceLayer .mn-il-orb-wrap {
    width: min(235px, 66vw);

    margin:
      24px
      auto
      34px;
  }

  #mnIntelligenceLayer .mn-il-handoff {
    width: 76%;
    height: 74px;

    margin:
      20px
      auto
      0;

    opacity: 0.34;
  }

  #mnIntelligenceLayer .mn-il-handoff-path:first-child,
  #mnIntelligenceLayer .mn-il-handoff-path:nth-child(3) {
    opacity: 0.35;
  }

  #mnIntelligenceLayer .mn-il-cards {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  #mnIntelligenceLayer .mn-il-card {
    min-height: 380px;

    transform: none !important;
  }

  #mnIntelligenceLayer .mn-il-card:hover,
  #mnIntelligenceLayer .mn-il-card:focus-within {
    transform: none;

    background:
      linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.018),
        rgba(255, 255, 255, 0.007)
      ),
      rgba(6, 20, 31, 0.36);

    border-color: rgba(190, 208, 221, 0.11);

    box-shadow: none;
  }

  #mnIntelligenceLayer .mn-il-card-visual,
  #mnIntelligenceLayer .mn-il-card:hover .mn-il-card-visual,
  #mnIntelligenceLayer .mn-il-card:focus-within .mn-il-card-visual {
    height: 185px;
    flex-basis: 185px;

    opacity: 0.78;
    filter: none;
    transform: none;
  }

  #mnIntelligenceLayer .mn-il-card-copy {
    padding: 21px 21px 24px;
  }

  #mnIntelligenceLayer .mn-il-card-title {
    font-size: 24px;
  }

  #mnIntelligenceLayer .mn-il-card-body {
    font-size: 14px;
  }

  #mnIntelligenceLayer .mn-il-model-line {
    stroke-dashoffset: 0;
  }

  #mnIntelligenceLayer .mn-il-model-dot {
    opacity: 1;
  }

  #mnIntelligenceLayer .mn-il-report-metrics {
    opacity: 1;
    transform: none;
  }

  #mnIntelligenceLayer .mn-il-report-page,
  #mnIntelligenceLayer .mn-il-card--analysis:hover .mn-il-report-page,
  #mnIntelligenceLayer .mn-il-card--analysis:focus-within .mn-il-report-page {
    transform: translateX(-50%);
  }
}

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

@media (prefers-reduced-motion: reduce) {
  #mnIntelligenceLayer .mn-il-card,
  #mnIntelligenceLayer .mn-il-card::before,
  #mnIntelligenceLayer .mn-il-card-visual,
  #mnIntelligenceLayer .mn-il-report-page,
  #mnIntelligenceLayer .mn-il-report-metrics {
    transition: none !important;
  }

  #mnIntelligenceLayer .mn-il-handoff-path,
  #mnIntelligenceLayer .mn-il-handoff-node-glow {
    animation: none !important;
  }

  #mnIntelligenceLayer .mn-il-handoff-particle {
    display: none;
  }

  #mnIntelligenceLayer .mn-il-model-line {
    stroke-dashoffset: 0 !important;
    animation: none !important;
  }

  #mnIntelligenceLayer .mn-il-model-dot,
  #mnIntelligenceLayer .mn-il-report-metrics {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}


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

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

   Complete standalone CSS for the dark network-statistics section.

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

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

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

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

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

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

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

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

  position:
    relative;

  left:
    50%;

  width:
    100vw;

  margin-left:
    -50vw;

  overflow:
    hidden;

  color:
    #f5fcff;

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

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

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

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

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


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

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

  position:
    absolute;

  inset:
    0;

  pointer-events:
    none;

  opacity:
    0.36;

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

  background-size:
    48px
    48px;
}


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

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

  z-index:
    1;

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

  margin:
    0
    auto;

  padding:
    76px
    34px
    0;

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

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


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

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

  grid-template-columns:
    0.86fr
    1.14fr;

  gap:
    58px;

  align-items:
    end;

  padding-bottom:
    30px;
}

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

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

  font-size:
    10px;

  font-weight:
    200;

  letter-spacing:
    0.15em;

  line-height:
    1.45;

  text-transform:
    uppercase;
}

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

  margin:
    10px
    0
    0;

  color:
    #f1fbfe;

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

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

  font-weight:
    700;

  letter-spacing:
    -0.06em;

  line-height:
    0.99;
}

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

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

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

  font-size:
    16px;

  font-weight:
    400;

  line-height:
    1.7;
}


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

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

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

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

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


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

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

  min-height:
    142px;

  padding:
    20px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  overflow:
    hidden;

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

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

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

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

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

  position:
    absolute;

  top:
    0;

  left:
    0;

  width:
    100%;

  height:
    2px;

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

  transform:
    scaleX(
      0
    );

  transform-origin:
    left
    center;

  transition:
    transform 240ms ease;
}

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

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

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


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

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

  color:
    #f6fcfe;

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

  font-size:
    36px;

  font-weight:
    700;

  font-variant-numeric:
    tabular-nums;

  letter-spacing:
    -0.06em;

  line-height:
    1;
}


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

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

  margin-top:
    10px;

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

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

  font-size:
    9px;

  font-weight:
    400;

  letter-spacing:
    0.12em;

  line-height:
    1.45;

  text-transform:
    uppercase;
}


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

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

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

    gap:
      7px;
  }

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

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


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

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

    padding:
      62px
      16px
      0;
  }

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

    letter-spacing:
      -0.064em;

    line-height:
      1;
  }

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

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

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

    padding:
      16px;
  }

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

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


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

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

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.001ms !important;
  }
}


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

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

   Complete standalone V5.5 CSS.

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

   Delete older integration-section CSS before adding this block.

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

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

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

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

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

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

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

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

  position:
    relative;

  left:
    50%;

  width:
    100vw;

  margin-left:
    -50vw;

  overflow:
    hidden;

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

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

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

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

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

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


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

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

  z-index:
    1;

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

  margin:
    0
    auto;

  padding:
    108px
    34px;

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

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


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

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

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

  gap:
    50px;

  align-items:
    end;

  margin-bottom:
    36px;
}

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

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

  font-size:
    10px;

  font-weight:
    200;

  letter-spacing:
    0.15em;

  line-height:
    1.45;

  text-transform:
    uppercase;
}

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

  margin:
    10px
    0
    0;

  padding:
    0;

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

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

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

  font-weight:
    700;

  letter-spacing:
    -0.073em;

  line-height:
    0.98;

  text-align:
    left;
}

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

  padding:
    0;

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

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

  font-size:
    16px;

  font-weight:
    400;

  line-height:
    1.7;
}


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

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

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

  width:
    100%;

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

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


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

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

  min-width:
    0;

  min-height:
    205px !important;

  margin:
    0 !important;

  padding:
    21px !important;

  border:
    0 !important;

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

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

  border-radius:
    0 !important;

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

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

  background-image:
    none !important;

  box-shadow:
    none !important;

  transform:
    none !important;

  transition:
    none !important;
}

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

  display:
    none !important;
}


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

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

  color:
    #4a91ab;

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

  font-size:
    9px;

  font-weight:
    600;

  letter-spacing:
    0.13em;

  line-height:
    1.4;
}

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

  padding:
    0 !important;

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

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

  font-size:
    21px !important;

  font-weight:
    700 !important;

  letter-spacing:
    -0.046em !important;

  line-height:
    1.05 !important;

  text-align:
    left !important;
}

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

  padding:
    0 !important;

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

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

  font-size:
    13px !important;

  font-weight:
    400 !important;

  line-height:
    1.58 !important;

  text-align:
    left !important;
}


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

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

  align-items:
    center;

  gap:
    8px;

  margin-top:
    22px;

  color:
    #397f99 !important;

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

  font-size:
    10px;

  font-weight:
    700;

  letter-spacing:
    0.12em;

  line-height:
    1.4;

  text-decoration:
    none !important;

  text-transform:
    uppercase;
}

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

  transition:
    transform
    180ms
    ease;
}

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


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

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

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

    gap:
      7px;
  }

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

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


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

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

    padding:
      72px
      16px;
  }

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

    letter-spacing:
      -0.064em;

    line-height:
      1;
  }

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

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

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

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

MANOLIN FAQ SECTION
"UNDERSTAND WHAT SITS BENEATH THE INTERFACE."
=============================================

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

.mn-faq-section {
position: relative;
overflow: hidden;
background: #ffffff;
color: var(--ink, #102230);
}

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

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

.mn-faq-section__container {
width: min(
calc(100% - 40px),
1320px
) !important;

margin: 0 auto !important;
padding: 108px 34px !important;

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

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

/* ------------------------------------------------------------------------
FAQ TWO-COLUMN LAYOUT
------------------------------------------------------------------------ */

.mn-faq-section__layout {
display: grid;

grid-template-columns:
minmax(0, 0.74fr)
minmax(0, 1.26fr);

gap: 74px;
align-items: start;
}

/* ------------------------------------------------------------------------
FAQ INTRODUCTION
------------------------------------------------------------------------ */

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

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

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

.mn-faq-section__title {
max-width: 620px;

margin: 10px 0 16px !important;
padding: 0 !important;

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

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

font-size: clamp(39px, 4.7vw, 60px) !important;
font-weight: 700 !important;
letter-spacing: -0.073em !important;
line-height: 0.99 !important;
text-align: left !important;
}

.mn-faq-section__description {
max-width: 560px;

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

color: var(--muted, #6b7f89) !important;

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

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

/* ------------------------------------------------------------------------
FAQ ACCORDION LIST
------------------------------------------------------------------------ */

.mn-faq-section__list {
border-top:
1px solid
var(--line-dark, rgba(16, 34, 48, 0.13));
}

.mn-faq-item {
border-bottom:
1px solid
var(--line-dark, rgba(16, 34, 48, 0.13));
}

/* ------------------------------------------------------------------------
FAQ QUESTION
------------------------------------------------------------------------ */

.mn-faq-item__question {
position: relative;
list-style: none;

padding: 20px 42px 20px 0;
cursor: pointer;

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

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

font-size: 15px !important;
font-weight: 700 !important;
letter-spacing: -0.015em !important;
line-height: 1.42 !important;

transition:
color 180ms ease;
}

.mn-faq-item__question::-webkit-details-marker {
display: none;
}

.mn-faq-item__question::after {
content: "+";

position: absolute;
top: 17px;
right: 4px;

color: #4b93ae;

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

font-size: 18px;
font-weight: 500;
line-height: 1;
}

.mn-faq-item[open]
.mn-faq-item__question::after {
content: "–";
}

.mn-faq-item__question:hover,
.mn-faq-item__question:focus-visible {
color: #397f99 !important;
}

/* ------------------------------------------------------------------------
FAQ ANSWER
------------------------------------------------------------------------ */

.mn-faq-item__answer {
max-width: 760px;

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

color: var(--muted, #6b7f89) !important;

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

font-size: 14px !important;
font-weight: 400 !important;
line-height: 1.68 !important;
}

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

@media (max-width: 1030px) {
.mn-faq-section__container {
padding: 92px 28px !important;
}

.mn-faq-section__layout {
grid-template-columns: 1fr;
gap: 28px;
}

.mn-faq-section__description {
max-width: 680px;
}
}

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

@media (max-width: 700px) {
.mn-faq-section__container {
width: min(
calc(100% - 24px),
1320px
) !important;

```
padding: 72px 16px !important;
```

}

.mn-faq-section__title {
font-size: 46px !important;
letter-spacing: -0.064em !important;
line-height: 1 !important;
}

.mn-faq-section__description {
font-size: 15px !important;
}

.mn-faq-item__question {
padding-right: 34px;
}

.mn-faq-item__answer {
padding-right: 24px !important;
}
}

/* ------------------------------------------------------------------------
   SECTION CTA
   Restores the understated outlined-button treatment.
   ------------------------------------------------------------------------ */

.mn-faq-section__cta,
.mn-faq-section__cta:link,
.mn-faq-section__cta:visited,
.mn-faq-section__cta:hover,
.mn-faq-section__cta:focus,
.mn-faq-section__cta:active {
  flex-shrink:
    0;

  min-height:
    48px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    11px;

  padding:
    0
    17px;

  border:
    1px
    solid
    var(
      --line-dark,
      rgba(
        16,
        34,
        48,
        0.13
      )
    );
  
  margin-top: 20px;

  background:
    transparent;

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

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

  font-size:
    13px !important;

  font-weight:
    700 !important;

  line-height:
    1.2 !important;

  text-decoration:
    none !important;

  transform:
    none;

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

.mn-faq-section__cta:hover,
.mn-faq-section__cta:focus-visible {
  border-color:
    rgba(
      16,
      34,
      48,
      0.32
    );

  background:
    #ffffff;

  transform:
    translateY(
      -2px
    );
}

.mn-faq-section__cta-arrow {
  display:
    inline-block;

  transition:
    transform
    180ms
    ease;
}

.mn-faq-section__cta:hover
  .mn-faq-section__cta-arrow,
.mn-faq-section__cta:focus-visible
  .mn-faq--section__cta-arrow {
  transform:
    translateX(
      4px
    );
}


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

MANOLIN FINAL DUAL-ICP CTA SECTION
"BRING A CLEARER QUESTION TO YOUR NEXT DECISION."
=================================================

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

.mn-final-cta-section {
position: relative;
overflow: hidden;

background: #071824;
color: #effbff;

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

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

/* ------------------------------------------------------------------------
TECHNICAL BACKGROUND GRID
------------------------------------------------------------------------ */

.mn-final-cta-section::before {
content: "";

position: absolute;
inset: 0;

pointer-events: none;
opacity: 0.42;

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

background-size: 48px 48px;
}

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

.mn-final-cta-section__container {
position: relative;
z-index: 1;

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

margin: 0 auto !important;
padding: 91px 34px 84px !important;

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

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

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

.mn-final-cta-section__header {
max-width: 900px;
margin-bottom: 35px;
}

.mn-final-cta-section__eyebrow {
color: var(--cyan, #b2dafb);

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

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

.mn-final-cta-section__title {
max-width: 900px;

margin: 10px 0 15px !important;
padding: 0 !important;

color: #f4fcfe !important;

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

font-size: clamp(40px, 5vw, 60px) !important;
font-weight: 700 !important;
letter-spacing: -0.073em !important;
line-height: 0.99 !important;
text-align: left !important;
}

.mn-final-cta-section__description {
max-width: 780px;

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

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

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

font-size: 16px !important;
font-weight: 400 !important;
line-height: 1.7 !important;
}

/* ------------------------------------------------------------------------
DUAL-ICP CTA GRID
------------------------------------------------------------------------ */

.mn-final-cta-section__grid {
display: grid;

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

gap: 36px;

padding-top: 27px;

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

/* ------------------------------------------------------------------------
DASHED CENTER DIVIDER
------------------------------------------------------------------------ */

.mn-final-cta-section__divider {
align-self: stretch;
min-height: 180px;

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

/* ------------------------------------------------------------------------
CTA LANES
------------------------------------------------------------------------ */

.mn-final-cta-section__lane {
padding: 0 8px;
}

.mn-final-cta-section__lane:first-child {
padding-left: 0;
}

.mn-final-cta-section__lane:last-child {
padding-right: 0;
}

.mn-final-cta-section__lane-label {
display: block;

color: var(--cyan, #b2dafb);

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

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

.mn-final-cta-section__lane-title {
max-width: 520px;

margin: 12px 0 11px !important;
padding: 0 !important;

color: #f5fcfe !important;

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

font-size: 29px !important;
font-weight: 700 !important;
letter-spacing: -0.046em !important;
line-height: 1.08 !important;
text-align: left !important;
}

.mn-final-cta-section__lane-description {
max-width: 560px;

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

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

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

font-size: 14px !important;
font-weight: 400 !important;
line-height: 1.62 !important;
}

/* ------------------------------------------------------------------------
TEXT LINKS AND ANIMATED ARROWS
------------------------------------------------------------------------ */

.mn-final-cta-section__link,
.mn-final-cta-section__link:link,
.mn-final-cta-section__link:visited,
.mn-final-cta-section__link:hover,
.mn-final-cta-section__link:focus,
.mn-final-cta-section__link:active {
display: inline-flex;
align-items: center;
gap: 9px;

color: var(--cyan, #b2dafb) !important;

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

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

.mn-final-cta-section__arrow {
display: inline-block;

transition:
transform 180ms ease;
}

.mn-final-cta-section__link:hover
.mn-final-cta-section__arrow,
.mn-final-cta-section__link:focus-visible
.mn-final-cta-section__arrow {
transform: translateX(4px);
}

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

@media (max-width: 700px) {
.mn-final-cta-section__container {
width: min(
calc(100% - 24px),
1320px
) !important;

```
padding: 76px 16px 70px !important;
```

}

.mn-final-cta-section__title {
font-size: 46px !important;
letter-spacing: -0.064em !important;
line-height: 1 !important;
}

.mn-final-cta-section__description {
font-size: 15px !important;
}

.mn-final-cta-section__grid {
grid-template-columns: 1fr;
gap: 23px;
}

.mn-final-cta-section__divider {
display: none;
}

.mn-final-cta-section__lane {
padding: 0;
}

.mn-final-cta-section__lane
+
.mn-final-cta-section__lane {
padding-top: 22px;


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


}
}

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

@media (prefers-reduced-motion: reduce) {
.mn-final-cta-section__arrow {
transition-duration: 0.001ms !important;
}
}

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

   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(
      --mn-mist,
      #EDF3F4
    );

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

  scroll-margin-top:
    92px;
}

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


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

.mn-insights-section__container {
  position:
    relative;

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

  margin:
    0
    auto !important;

  padding:
    108px
    34px !important;

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

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


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

.mn-insights-section__header {
  display:
    flex;

  align-items:
    end;

  justify-content:
    space-between;

  gap:
    32px;

  margin-bottom:
    29px;
}

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

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

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

  font-size:
    10px;

  font-weight:
    200;

  letter-spacing:
    0.15em;

  line-height:
    1.45;

  text-transform:
    uppercase;
}

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

  margin:
    10px
    0
    18px !important;

  padding:
    0 !important;

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

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

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

  font-weight:
    700 !important;

  letter-spacing:
    -0.073em !important;

  line-height:
    0.98 !important;

  text-align:
    left !important;
}

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

  margin:
    0 !important;

  padding:
    0 !important;

  color:
    var(
      --muted,
      #6b7f89
    ) !important;

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

  font-size:
    16px !important;

  font-weight:
    400 !important;

  line-height:
    1.7 !important;
}


/* ------------------------------------------------------------------------
   SECTION CTA
   Restores the understated outlined-button treatment.
   ------------------------------------------------------------------------ */

.mn-insights-section__cta,
.mn-insights-section__cta:link,
.mn-insights-section__cta:visited,
.mn-insights-section__cta:hover,
.mn-insights-section__cta:focus,
.mn-insights-section__cta:active {
  flex-shrink:
    0;

  min-height:
    48px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    11px;

  padding:
    0
    17px;

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

  background:
    transparent;

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

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

  font-size:
    13px !important;

  font-weight:
    700 !important;

  line-height:
    1.2 !important;

  text-decoration:
    none !important;

  transform:
    none;

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

.mn-insights-section__cta:hover,
.mn-insights-section__cta:focus-visible {
  border-color:
    rgba(
      16,
      34,
      48,
      0.32
    );

  background:
    #ffffff;

  transform:
    translateY(
      -2px
    );
}

.mn-insights-section__cta-arrow {
  display:
    inline-block;

  transition:
    transform
    180ms
    ease;
}

.mn-insights-section__cta:hover
  .mn-insights-section__cta-arrow,
.mn-insights-section__cta:focus-visible
  .mn-insights-section__cta-arrow {
  transform:
    translateX(
      4px
    );
}


/* ------------------------------------------------------------------------
   ARTICLE GRID
   Restores the original three-column bordered-card layout.
   ------------------------------------------------------------------------ */

.mn-insights-section__grid {
  display:
    grid;

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

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

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


/* ------------------------------------------------------------------------
   ARTICLE CARDS
   Preserves the V5.5 dimensions and visible borders.
   ------------------------------------------------------------------------ */

.mn-insights-card,
.mn-insights-card:link,
.mn-insights-card:visited {
  position:
    relative !important;

  isolation:
    isolate;

  min-height:
    274px;

  padding:
    20px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    space-between;

  overflow:
    hidden !important;

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

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

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

  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 {
    scroll-margin-top: 72px;
  }

  .mn-insights-section__container {
    width:
      min(
        calc(100% - 24px),
        1320px
      ) !important;

    padding:
      72px
      16px !important;
  }

  .mn-insights-section__title {
    font-size:
      46px !important;

    letter-spacing:
      -0.064em !important;

    line-height:
      1 !important;
  }

  .mn-insights-section__description {
    font-size:
      15px !important;
  }

  .mn-insights-card {
    min-height:
      218px;

    padding:
      18px;
  }

  .mn-insights-card__title {
    font-size:
      21px !important;
  }
}


/* ------------------------------------------------------------------------
   REDUCED-MOTION ACCESSIBILITY
   Preserves the image reveal while removing pronounced movement.
   ------------------------------------------------------------------------ */

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

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

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

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

   Complete replacement CSS for the shared-intelligence section.

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


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

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

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

  overflow: hidden;

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

  color:
    #f5fcff;

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

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

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

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


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

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

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

  display: block !important;

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

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

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


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

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

  pointer-events: none;

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

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

  position: absolute;
  inset: 0;

  opacity: 0.44;

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

  background-size:
    48px
    48px;
}


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

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

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

  margin:
    0
    auto;

  padding:
    108px
    34px;

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

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


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

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

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

  gap:
    50px;

  align-items:
    end;

  margin-bottom:
    37px;
}

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

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

  font-size:
    10px;

  font-weight:
    200;

  letter-spacing:
    0.15em;

  line-height:
    1.45;

  text-transform:
    uppercase;
}

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

  margin:
    10px
    0
    0 !important;

  padding:
    0 !important;

  color:
    #f5fcff !important;

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

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

  font-weight:
    700 !important;

  letter-spacing:
    -0.073em !important;

  line-height:
    0.98 !important;

  text-align:
    left !important;
}

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

  padding:
    0 !important;

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

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

  font-size:
    16px !important;

  font-weight:
    400 !important;

  line-height:
    1.7 !important;
}


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

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

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

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

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


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

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

  z-index:
    1;

  min-height:
    246px;

  padding:
    22px;

  overflow:
    hidden;

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

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

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

  backdrop-filter:
    blur(3px);

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

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


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

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

  position:
    absolute;

  top:
    0;

  left:
    0;

  width:
    100%;

  height:
    3px;

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

  transform:
    scaleX(0);

  transform-origin:
    left center;

  transition:
    transform 260ms ease;
}


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

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

  position:
    absolute;

  inset:
    0;

  z-index:
    -1;

  opacity:
    0;

  pointer-events:
    none;

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

  transition:
    opacity 240ms ease;
}


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

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

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

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

    transform:
      translateY(-4px);
  }

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

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


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

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

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

  font-size:
    9px;

  font-weight:
    200;

  letter-spacing:
    0.13em;

  line-height:
    1.4;

  text-transform:
    uppercase;
}

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

  padding:
    0 !important;

  color:
    #f5fcff !important;

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

  font-size:
    24px !important;

  font-weight:
    700 !important;

  letter-spacing:
    -0.046em !important;

  line-height:
    1.05 !important;

  text-align:
    left !important;
}

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

  padding:
    0 !important;

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

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

  font-size:
    13px !important;

  font-weight:
    400 !important;

  line-height:
    1.58 !important;

  text-align:
    left !important;
}


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

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

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

    gap:
      7px;
  }

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

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


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

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

    padding:
      72px
      16px;
  }

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

    letter-spacing:
      -0.064em !important;

    line-height:
      1 !important;
  }

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

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

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


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

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

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

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



/* ======================================================================
   MANOLIN HOMEPAGE — STATIC HERO FULL-BLEED SAFEGUARD
   Prevents HubSpot module-width clipping without introducing any scroll
   transition behavior.
   ====================================================================== */
#mnHomeHero {
  position: relative !important;
  left: 50% !important;
  right: auto !important;
  width: 100vw !important;
  max-width: none !important;
  margin-left: -50vw !important;
  margin-right: 0 !important;
  padding: 0 !important;
  overflow-x: clip !important;
}

#mnHomeHero .journey,
#mnHomeHero .scene {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#mnHomeHero .hero-copy {
  top: 46% !important;
}

@media (max-width: 850px) {
  #mnHomeHero .hero-copy {
    top: 47% !important;
  }
}

@media (max-width: 600px) {
  #mnHomeHero {
    width: 100vw !important;
    max-width: none !important;
  }

  #mnHomeHero .scene {
    width: 100vw !important;
    max-width: none !important;
  }

  #mnHomeHero .hero-copy {
    top: 47% !important;
    left: 21px !important;
    right: 21px !important;
    width: auto !important;
  }

  #mnHomeHero .network-box {
    left: -7% !important;
    width: 112vw !important;
  }

  #mnHomeHero .fish-box {
    right: -2% !important;
    width: 57vw !important;
  }
}

/* ======================================================================
   MANOLIN HOMEPAGE — APPLICATIONS CONTAINMENT + FULL-BLEED FIX
   Keeps the chooser full-width in HubSpot and prevents Watershed/Harpoon
   product graphics from bleeding across the left-hand copy column.
   ====================================================================== */
#mnHomeApplications {
  position: relative !important;
  left: 50% !important;
  width: 100vw !important;
  max-width: none !important;
  margin-left: -50vw !important;
  overflow-x: clip !important;
}

#mnHomeApplications .applications-scene {
  width: 100vw !important;
  max-width: none !important;
}

@media (min-width: 851px) {
  #mnHomeApplications .applications-scene.is-app {
    height: min(790px, calc(100svh - var(--mn-app-header-offset))) !important;
    min-height: 720px !important;
    overflow: hidden !important;
  }

  #mnHomeApplications .applications-scene.is-app .app-stage {
    grid-template-columns: minmax(360px, 41%) minmax(0, 59%) !important;
    gap: clamp(28px, 3vw, 54px) !important;
    padding-left: clamp(34px, 5vw, 95px) !important;
    padding-right: 0 !important;
    overflow: hidden !important;
  }

  #mnHomeApplications .app-copy {
    max-width: 560px !important;
    min-width: 0 !important;
  }

  #mnHomeApplications .product-visual {
    min-width: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  #mnHomeApplications .visual-wrapper {
    left: 0 !important;
    right: auto !important;
    transform: translate(5%, -45%) !important;
    transform-origin: center left !important;
  }

  #mnHomeApplications .applications-scene.is-app .visual-wrapper.active {
    transform: translate(0, -45%) !important;
  }

  #mnHomeApplications #watershedVisual {
    left: 0 !important;
    right: auto !important;
    width: 1100px !important;
    max-width: none !important;
  }

  #mnHomeApplications #harpoonVisual {
    left: 0 !important;
    right: auto !important;
    width: min(920px, 68vw) !important;
  }
}

@media (max-width: 850px) {
  #mnHomeApplications {
    width: 100vw !important;
    max-width: none !important;
  }

  #mnHomeApplications .applications-scene {
    width: 100vw !important;
    max-width: none !important;
  }
}


/* ======================================================================
   MANOLIN HOMEPAGE — PLATFORM → APPLICATIONS FLOW
   Keeps the Intelligence Platform Layer and Applications chooser visually
   continuous. The selected product/app view remains unchanged.
   ====================================================================== */

@media (min-width: 761px) {
  #mnHomeApplications .applications-scene:not(.is-app) {
    height: 610px;
    min-height: 610px;

    background:
      linear-gradient(
        180deg,
        #06141F 0%,
        rgba(6, 20, 31, 0) 23%
      ),
      radial-gradient(
        circle at 70% 48%,
        rgba(66, 148, 179, 0.14),
        transparent 31%
      ),
      linear-gradient(
        122deg,
        #05131e,
        #071924 52%,
        #0b2534
      );
  }

  #mnHomeApplications .applications-scene:not(.is-app)::before {
    opacity: 0.65;

    mask-image:
      linear-gradient(
        180deg,
        transparent 0%,
        rgba(0, 0, 0, 0.34) 7%,
        #000 17%,
        #000 93%,
        transparent 100%
      );

    -webkit-mask-image:
      linear-gradient(
        180deg,
        transparent 0%,
        rgba(0, 0, 0, 0.34) 7%,
        #000 17%,
        #000 93%,
        transparent 100%
      );
  }

  #mnHomeApplications .applications-scene:not(.is-app)::after {
    background:
      radial-gradient(
        ellipse 89% 79% at 52% 48%,
        transparent 52%,
        rgba(2, 10, 16, 0.34)
      );
  }

  #mnHomeApplications .applications-scene:not(.is-app) .chooser {
    justify-content: flex-start;

    padding:
      56px
      clamp(26px, 5vw, 95px)
      54px;
  }

  #mnHomeApplications .applications-scene:not(.is-app) .chooser-title {
    margin-bottom: 22px;
  }
}


/* ======================================================================
   MANOLIN HOMEPAGE — AUTHORITATIVE MOBILE HERO COMPOSITION
   Updated November 1, 2026.
   Purpose:
   - Gives the standalone homepage hero a dedicated mobile composition.
   - Overrides legacy / overlapping mobile hero rules earlier in this file.
   - Neutralizes the legacy inline 60px headline span without HTML changes.
   - Leaves desktop and tablet layouts above 700px unchanged.
   ====================================================================== */

@media (max-width: 700px) {
  #mnHomeHero {
    --mn-home-header-offset: 74px;
  }

  #mnHomeHero .journey {
    height: auto !important;
    min-height: 0 !important;
  }

  #mnHomeHero .scene {
    position: relative !important;
    top: auto !important;

    width: 100vw !important;
    height: max(
      820px,
      calc(100svh - var(--mn-home-header-offset))
    ) !important;
    min-height: 820px !important;

    overflow: hidden !important;
  }

  /* ---------------------------------------------------------------
     MOBILE VISUAL FIELD
     The network remains present, but becomes atmospheric rather than
     competing directly with the headline and CTA stack.
     --------------------------------------------------------------- */

  #mnHomeHero .visual-stage {
    opacity: 0.86 !important;
    filter: none !important;
    transform: none !important;
  }

  #mnHomeHero .network-box {
    top: -7% !important;
    left: 13% !important;

    width: 96vw !important;
    max-width: none !important;

    opacity: 0.72 !important;
    filter:
      saturate(0.92)
      brightness(0.92);
  }

  #mnHomeHero .fish-box {
    top: 19% !important;
    right: -7% !important;

    width: 52vw !important;
    max-width: none !important;

    opacity: 0.72 !important;
    filter:
      drop-shadow(0 0 15px #06141f)
      saturate(0.88);
  }

  #mnHomeHero .fish-box::before {
    opacity: 0.82;
  }

  /* ---------------------------------------------------------------
     MOBILE COPY COMPOSITION
     No vertical centering. The copy gets a stable starting point and
     its own dark readability field over the network artwork.
     --------------------------------------------------------------- */

  #mnHomeHero .hero-copy {
    position: absolute !important;
    z-index: 8 !important;

    top: clamp(205px, 29svh, 245px) !important;
    bottom: auto !important;
    left: 21px !important;
    right: 21px !important;

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

    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  #mnHomeHero .hero-copy::before {
    z-index: -1 !important;
    inset: -28px -21px -26px -21px !important;

    opacity: 1 !important;

    background:
      linear-gradient(
        180deg,
        rgba(5, 19, 30, 0.04) 0%,
        rgba(5, 19, 30, 0.30) 17%,
        rgba(5, 19, 30, 0.68) 57%,
        rgba(5, 19, 30, 0.90) 100%
      ),
      linear-gradient(
        90deg,
        rgba(5, 19, 30, 0.78) 0%,
        rgba(5, 19, 30, 0.48) 74%,
        rgba(5, 19, 30, 0.10) 100%
      ) !important;
  }

  #mnHomeHero .eyebrow-label,
  #mnHomeHero .manolin-hero-eyebrow-test {
    margin: 0 0 13px !important;

    font-size: 8px !important;
    line-height: 1.4 !important;
    letter-spacing: 0.15em !important;
  }

  #mnHomeHero .hero-copy h1,
  #mnHomeHero .hero-copy .manolin-hero-title-test {
    max-width: 560px !important;
    margin: 0 0 17px !important;

    font-size:
      clamp(
        38px,
        10.3vw,
        44px
      ) !important;

    font-weight: 700 !important;
    line-height: 1.01 !important;
    letter-spacing: -0.058em !important;

    text-wrap: balance;
  }

  /* HubSpot currently contains an inline font-size on this inner span.
     Force it to inherit the responsive H1 size instead of remaining 60px. */
  #mnHomeHero .hero-copy .manolin-hero-title-test > span {
    font-size: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
  }

  #mnHomeHero .hero-copy p,
  #mnHomeHero .hero-copy .manolin-hero-description-test {
    max-width: 520px !important;
    margin: 0 0 20px !important;

    color: rgba(210, 231, 239, 0.78) !important;

    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.52 !important;
  }

  /* ---------------------------------------------------------------
     MOBILE CTA STACK
     --------------------------------------------------------------- */

  #mnHomeHero .hero-actions,
  #mnHomeHero .hero-actions.manolin-hero-actions-test,
  #mnHomeHero .manolin-hero-actions-test {
    width: 100% !important;

    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;

    margin: 0 !important;
  }

  #mnHomeHero .primary,
  #mnHomeHero .secondary,
  #mnHomeHero .manolin-hero-button-primary-test,
  #mnHomeHero .manolin-hero-button-secondary-test {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    padding: 0 16px !important;

    font-size: 12px !important;
    line-height: 1 !important;
    gap: 14px !important;

    white-space: nowrap !important;
  }

  /* ---------------------------------------------------------------
     MOBILE META RAIL
     Three rows instead of forcing three labels into one wrapped line.
     --------------------------------------------------------------- */

  #mnHomeHero .hero-meta {
    position: absolute !important;
    z-index: 8 !important;

    left: 21px !important;
    right: 21px !important;
    bottom: 17px !important;

    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;

    padding-top: 11px !important;

    border-top:
      1px solid
      rgba(190, 208, 221, 0.16) !important;

    opacity: 1 !important;

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

    font-size: 7.5px !important;
    line-height: 1.35 !important;
    letter-spacing: 0.105em !important;
  }

  #mnHomeHero .hero-meta span {
    display: flex !important;
    align-items: baseline !important;

    min-width: 0 !important;

    font-size: inherit !important;
    line-height: inherit !important;
  }

  #mnHomeHero .hero-meta b,
  #mnHomeHero .hero-meta strong {
    display: inline-block !important;
    flex: 0 0 27px !important;

    margin-right: 0 !important;
  }
}


/* ----------------------------------------------------------------------
   SMALL MOBILE FIT
   Keeps 320–390px screens from becoming oversized while preserving
   the same hierarchy and breathing room.
   ---------------------------------------------------------------------- */

@media (max-width: 390px) {
  #mnHomeHero .scene {
    height: max(
      800px,
      calc(100svh - var(--mn-home-header-offset))
    ) !important;
    min-height: 800px !important;
  }

  #mnHomeHero .hero-copy {
    top: clamp(190px, 27svh, 218px) !important;
    left: 18px !important;
    right: 18px !important;
  }

  #mnHomeHero .hero-copy h1,
  #mnHomeHero .hero-copy .manolin-hero-title-test {
    font-size:
      clamp(
        36px,
        10.2vw,
        40px
      ) !important;

    line-height: 1.015 !important;
  }

  #mnHomeHero .hero-copy p,
  #mnHomeHero .hero-copy .manolin-hero-description-test {
    font-size: 13.5px !important;
    line-height: 1.5 !important;
  }

  #mnHomeHero .hero-meta {
    left: 18px !important;
    right: 18px !important;
    bottom: 15px !important;
  }

  #mnHomeHero .network-box {
    left: 8% !important;
    width: 102vw !important;
  }

  #mnHomeHero .fish-box {
    right: -10% !important;
    width: 56vw !important;
  }
}


/* ======================================================================
   MANOLIN HOMEPAGE — 3-STAGE NETWORK COPY LAYOUT SAFEGUARD
   Updated November 2, 2026.

   Purpose:
   Preserve the original Technology-page vertical copy-state layout after
   the section is moved into the Homepage CSS cascade.

   No animation, stage transition, visual, sizing, background, or JS
   behavior is changed here.
   ====================================================================== */

#mn-network-story .mn-copy-state {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
}

#mn-network-story .mn-copy-state > h2,
#mn-network-story .mn-copy-state > p,
#mn-network-story .mn-copy-state > .mn-network-mantra {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
}