/* IQ Mindware shared light hero + title system — September 2026.
   Primary navigation pages use one visual language and one desktop hero envelope.
   Desktop heroes are designed to fit below the 80px navigation within a single viewport. */

:root {
  --iqm-hero-bg: url("/assets/images/brand/iqm-hero-neural-light.svg?v=20260922-integrated-2");
  --iqm-hero-ink: #0a2550;
  --iqm-hero-muted: #48657f;
  --iqm-hero-blue: #22aaff;
  --iqm-hero-cyan: #23baf4;
  --iqm-hero-lime: #9be600;
  --iqm-hero-panel: rgba(255,255,255,.82);
  --iqm-hero-line: rgba(73,139,190,.20);
  --iqm-hero-h1-size: clamp(3rem, 5vw, 4.85rem);
  --iqm-hero-h1-line: .99;
  --iqm-hero-h1-tracking: -.047em;
  --iqm-hero-lede-size: clamp(1.02rem, 1.35vw, 1.22rem);
  --iqm-menu-section-title-size: clamp(2rem, 3.3vw, 3rem);
  --iqm-menu-section-title-line: 1.08;
  --iqm-menu-section-title-tracking: -.035em;
}

.iqm-home-page .sy-hero,
.synergy-start-v1 .demo-hero,
.how-page .how-hero,
.why-iq-v2 .sy-hero,
.synergy-plans-page .plans-hero,
.synergy-science-page .science-hero,
.synergy-organisations-page .swi-hero,
.synergy-learn-page .learn-hero,
.synergy-faq-page .faq-hero-v2,
.workflow-page .wf-page-hero,
.vision-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--iqm-hero-ink) !important;
  background-color: #f7fbff !important;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.985) 0%, rgba(255,255,255,.93) 30%, rgba(255,255,255,.56) 47%, rgba(255,255,255,.10) 62%, rgba(255,255,255,0) 76%),
    var(--iqm-hero-bg) !important;
  background-position: center center, 62% center !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size: cover, cover !important;
}

/* Remove old dark-background decorations that conflict with the new shared artwork. */
.iqm-home-page .sy-hero::before,
.iqm-home-page .sy-hero::after,
.synergy-start-v1 .demo-hero::before,
.synergy-start-v1 .demo-hero::after,
.how-page .how-hero::before,
.how-page .how-hero::after,
.why-iq-v2 .sy-hero::before,
.why-iq-v2 .sy-hero::after,
.synergy-plans-page .plans-hero::before,
.synergy-plans-page .plans-hero::after,
.synergy-science-page .science-hero::before,
.synergy-science-page .science-hero::after,
.synergy-organisations-page .swi-hero::before,
.synergy-organisations-page .swi-hero::after,
.synergy-learn-page .learn-hero::before,
.synergy-learn-page .learn-hero::after,
.synergy-faq-page .faq-hero-v2::before,
.synergy-faq-page .faq-hero-v2::after,
.workflow-page .wf-page-hero::before,
.workflow-page .wf-page-hero::after,
.vision-hero::before,
.vision-hero::after {
  content: none !important;
}

/* One desktop hero envelope: nav (80px) + hero fits in one viewport. */
@media (min-width: 901px) {
  .iqm-home-page .sy-hero,
  .synergy-start-v1 .demo-hero,
  .how-page .how-hero,
  .why-iq-v2 .sy-hero,
  .synergy-plans-page .plans-hero,
  .synergy-science-page .science-hero,
  .synergy-organisations-page .swi-hero,
  .synergy-learn-page .learn-hero,
  .synergy-faq-page .faq-hero-v2,
  .workflow-page .wf-page-hero,
  .vision-hero {
    height: min(718px, calc(100dvh - 82px));
    padding-block: clamp(1.8rem, 4vh, 3.25rem) !important;
    display: flex;
    align-items: center;
  }

  .iqm-home-page .sy-hero > .sy-shell,
  .synergy-start-v1 .demo-hero > .sy-shell,
  .how-page .how-hero > .sy-shell,
  .why-iq-v2 .sy-hero > .sy-shell,
  .synergy-plans-page .plans-hero > .sy-shell,
  .synergy-science-page .science-hero > .sy-shell,
  .synergy-organisations-page .swi-hero > .sy-shell,
  .synergy-learn-page .learn-hero > .sy-shell,
  .synergy-faq-page .faq-hero-v2 > .sy-shell,
  .vision-hero > .sy-shell,
  .workflow-page .wf-page-hero > .wf-page-hero__inner {
    width: min(1240px, calc(100% - 5rem));
    margin-inline: auto;
    max-height: 100%;
  }
}

/* Unified hero title system. */
.iqm-home-page .sy-hero h1,
.synergy-start-v1 .demo-hero h1,
.how-page .how-hero h1,
.why-iq-v2 .sy-hero h1,
.synergy-plans-page .plans-hero h1,
.synergy-science-page .science-hero h1,
.synergy-organisations-page .swi-hero h1,
.synergy-learn-page .learn-hero h1,
.synergy-faq-page .faq-hero-v2 h1,
.workflow-page .wf-page-hero h1,
.vision-hero h1 {
  margin-top: .4rem;
  margin-bottom: .9rem;
  max-width: 15ch;
  color: var(--iqm-hero-ink) !important;
  font-family: ui-rounded, "Trebuchet MS", system-ui, sans-serif !important;
  font-size: var(--iqm-hero-h1-size) !important;
  font-weight: 850 !important;
  line-height: var(--iqm-hero-h1-line) !important;
  letter-spacing: var(--iqm-hero-h1-tracking) !important;
  text-shadow: none !important;
}

/* Every hero uses the same blue emphasis + lime underline. */
.iqm-home-page .sy-hero h1 span,
.synergy-start-v1 .demo-hero h1 span,
.how-page .how-hero h1 span,
.why-iq-v2 .sy-hero h1 span,
.synergy-plans-page .plans-hero h1 span,
.synergy-science-page .science-hero h1 span,
.synergy-organisations-page .swi-hero h1 span,
.synergy-learn-page .learn-hero h1 span,
.synergy-faq-page .faq-hero-v2 h1 span,
.vision-hero h1 span,
.workflow-page .wf-page-hero h1 strong {
  position: relative;
  display: inline-block;
  color: var(--iqm-hero-blue) !important;
  background: linear-gradient(90deg, #0b7fee 0%, #17a7ed 58%, #63bf30 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.iqm-home-page .sy-hero h1 span::after,
.synergy-start-v1 .demo-hero h1 span::after,
.how-page .how-hero h1 span::after,
.why-iq-v2 .sy-hero h1 span::after,
.synergy-plans-page .plans-hero h1 span::after,
.synergy-science-page .science-hero h1 span::after,
.synergy-organisations-page .swi-hero h1 span::after,
.synergy-learn-page .learn-hero h1 span::after,
.synergy-faq-page .faq-hero-v2 h1 span::after,
.vision-hero h1 span::after,
.workflow-page .wf-page-hero h1 strong::after {
  content: "";
  position: absolute;
  left: .02em;
  bottom: -.12em;
  width: min(5.2em, 58%);
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, #8ee400, #ccff66);
  transform: rotate(-1.5deg);
  transform-origin: left center;
}

/* Shared hero eyebrow and lede colours. */
.iqm-home-page .sy-hero .sy-kicker,
.synergy-start-v1 .demo-hero .sy-kicker,
.how-page .how-hero .sy-kicker,
.why-iq-v2 .sy-hero .sy-kicker,
.synergy-plans-page .plans-hero .sy-kicker,
.synergy-science-page .science-hero .sy-kicker,
.synergy-organisations-page .swi-hero .sy-kicker,
.synergy-learn-page .learn-hero .sy-kicker,
.synergy-faq-page .faq-hero-v2 .sy-kicker,
.workflow-page .wf-page-hero .wf-eyebrow,
.vision-hero .sy-kicker {
  color: #126caf !important;
  font-weight: 850 !important;
}

.iqm-home-page .sy-hero .sy-kicker::before,
.synergy-start-v1 .demo-hero .sy-kicker::before,
.how-page .how-hero .sy-kicker::before,
.why-iq-v2 .sy-hero .sy-kicker::before,
.synergy-plans-page .plans-hero .sy-kicker::before,
.synergy-science-page .science-hero .sy-kicker::before,
.synergy-organisations-page .swi-hero .sy-kicker::before,
.synergy-learn-page .learn-hero .sy-kicker::before,
.synergy-faq-page .faq-hero-v2 .sy-kicker::before,
.vision-hero .sy-kicker::before {
  background: linear-gradient(90deg, #0b82ee, #9be600) !important;
}

.iqm-home-page .sy-hero-lede,
.iqm-home-page .sy-hero-tagline,
.synergy-start-v1 .demo-hero-lede,
.how-page .how-hero-lede,
.why-iq-v2 .sy-hero-lede,
.synergy-plans-page .plans-hero-lede,
.synergy-science-page .science-hero-lede,
.synergy-organisations-page .swi-hero-lede,
.synergy-organisations-page .swi-hero-note,
.synergy-learn-page .learn-hero-lede,
.synergy-faq-page .faq-hero-lede-v2,
.workflow-page .wf-page-hero .wf-lede,
.workflow-page .wf-hero-note p,
.vision-hero p:not(.sy-kicker) {
  color: var(--iqm-hero-muted) !important;
  font-size: var(--iqm-hero-lede-size);
  line-height: 1.55 !important;
  text-shadow: none !important;
}

/* Hero action treatment matches the selected mock-up: confident blue primary, white secondary. */
.iqm-home-page .sy-hero .sy-actions .sy-btn,
.synergy-start-v1 .demo-hero .sy-actions .sy-btn,
.how-page .how-hero .sy-actions .sy-btn,
.why-iq-v2 .sy-hero .sy-actions .sy-btn,
.synergy-plans-page .plans-hero .sy-actions .sy-btn,
.synergy-science-page .science-hero .sy-actions .sy-btn,
.synergy-organisations-page .swi-hero .sy-actions .sy-btn,
.synergy-learn-page .learn-hero .sy-actions .sy-btn,
.synergy-faq-page .faq-hero-v2 .sy-actions .sy-btn,
.vision-hero .sy-actions .sy-btn,
.workflow-page .wf-page-hero .wf-btn {
  min-height: 50px;
  padding-inline: 1.35rem;
  border-radius: 999px !important;
  font-weight: 800 !important;
}

.iqm-home-page .sy-hero .sy-actions .sy-btn--lime,
.iqm-home-page .sy-hero .sy-actions .sy-btn--blue,
.synergy-start-v1 .demo-hero .sy-actions .sy-btn--lime,
.synergy-start-v1 .demo-hero .sy-actions .sy-btn--blue,
.how-page .how-hero .sy-actions .sy-btn--lime,
.how-page .how-hero .sy-actions .sy-btn--blue,
.why-iq-v2 .sy-hero .sy-actions .sy-btn--lime,
.why-iq-v2 .sy-hero .sy-actions .sy-btn--blue,
.synergy-plans-page .plans-hero .sy-actions .sy-btn--lime,
.synergy-plans-page .plans-hero .sy-actions .sy-btn--blue,
.synergy-science-page .science-hero .sy-actions .sy-btn--lime,
.synergy-science-page .science-hero .sy-actions .sy-btn--blue,
.synergy-organisations-page .swi-hero .sy-actions .sy-btn--lime,
.synergy-organisations-page .swi-hero .sy-actions .sy-btn--blue,
.synergy-learn-page .learn-hero .sy-actions .sy-btn--lime,
.synergy-learn-page .learn-hero .sy-actions .sy-btn--blue,
.synergy-faq-page .faq-hero-v2 .sy-actions .sy-btn--lime,
.synergy-faq-page .faq-hero-v2 .sy-actions .sy-btn--blue,
.vision-hero .sy-actions .sy-btn--lime,
.vision-hero .sy-actions .sy-btn--blue,
.workflow-page .wf-page-hero .wf-btn--primary {
  color: #fff !important;
  -webkit-text-fill-color: currentColor !important;
  border-color: transparent !important;
  background: linear-gradient(135deg, #087cf2 0%, #13bff0 100%) !important;
  box-shadow: 0 12px 28px rgba(13,130,239,.22) !important;
}

.iqm-home-page .sy-hero .sy-actions > .sy-link,
.synergy-start-v1 .demo-hero .sy-actions > .sy-link,
.how-page .how-hero .sy-actions > .sy-link,
.why-iq-v2 .sy-hero .sy-actions > .sy-link,
.synergy-plans-page .plans-hero .sy-actions > .sy-link,
.synergy-science-page .science-hero .sy-actions > .sy-link,
.synergy-organisations-page .swi-hero .sy-actions > .sy-link,
.synergy-learn-page .learn-hero .sy-actions > .sy-link,
.synergy-faq-page .faq-hero-v2 .sy-actions > .sy-link,
.vision-hero .sy-actions > .sy-link,
.workflow-page .wf-page-hero .wf-btn--outline-light {
  min-height: 50px;
  padding: .72rem 1.2rem;
  color: #0f5792 !important;
  -webkit-text-fill-color: currentColor !important;
  text-decoration: none !important;
  border: 1px solid rgba(37,126,194,.26) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.78) !important;
  box-shadow: 0 8px 22px rgba(24,93,144,.08);
  backdrop-filter: blur(8px);
}

/* Light navigation on every primary-menu page, including retained workflow coaching. */
.synergy-home-v1 .sy-header,
.synergy-refresh.workflow-site .wf-header {
  background: rgba(255,255,255,.96) !important;
  border-bottom: 1px solid rgba(77,139,185,.16) !important;
  box-shadow: 0 6px 24px rgba(27,90,135,.05) !important;
  backdrop-filter: blur(14px);
}
.synergy-refresh.workflow-site .wf-nav a,
.synergy-refresh.workflow-site .wf-brand {
  color: #173a61 !important;
}
.synergy-refresh.workflow-site .wf-nav a:hover,
.synergy-refresh.workflow-site .wf-nav a:focus-visible,
.synergy-refresh.workflow-site .wf-nav a[aria-current="page"] {
  color: #087cf2 !important;
  border-color: rgba(13,130,239,.14) !important;
  background: rgba(13,130,239,.06) !important;
}
.synergy-refresh.workflow-site .wf-header__cta {
  color: #fff !important;
  border-color: transparent !important;
  background: linear-gradient(135deg,#087cf2,#13bff0) !important;
  box-shadow: 0 8px 22px rgba(13,130,239,.18) !important;
}

/* Shared second-level title scale and colour system. */
.iqm-home-page .sy-section-heading h2,
.iqm-home-page .sy-split h2,
.iqm-home-page .sy-agency-heading h2,
.synergy-start-v1 .demo-section h2,
.how-page .how-section-head h2,
.how-page .how-split > div > h2,
.how-page .trident-panel h2,
.how-page .how-cta h2,
.why-iq-v2 .why-section-heading h2,
.why-iq-v2 .why-mutualism > div > h2,
.why-iq-v2 .why-sources > .sy-shell > h2,
.why-iq-v2 .why-final h2,
.synergy-plans-page .plans-section-head h2,
.synergy-plans-page .plans-apps .plans-section-head h2,
.synergy-plans-page .plans-current h2,
.synergy-plans-page .plans-complete h2,
.synergy-plans-page .plans-boundary h2,
.synergy-science-page .science-section-head h2,
.synergy-science-page .principle-copy h2,
.synergy-organisations-page .swi-section-head h2,
.synergy-organisations-page .swi-split h2,
.synergy-learn-page .learn-section-head h2,
.synergy-learn-page .learn-callout h2,
.synergy-faq-page .faq-section-head-v2 h2,
.synergy-faq-page .faq-contact-card h2,
.workflow-page .wf-section-head .wf-title-lg,
.workflow-page .wf-split > div > .wf-title-lg,
.workflow-page .wf-section > .wf-shell > .wf-title-lg,
.workflow-page .wf-cta-band h2,
.vision-section h2 {
  color: var(--iqm-hero-ink) !important;
  font-family: ui-rounded, "Trebuchet MS", system-ui, sans-serif !important;
  font-size: var(--iqm-menu-section-title-size) !important;
  line-height: var(--iqm-menu-section-title-line) !important;
  letter-spacing: var(--iqm-menu-section-title-tracking) !important;
}

/* When secondary headings use an accent, it is always blue with the same lime underline treatment. */
.synergy-home-v1 :is(.sy-title-accent,.sy-title-highlight),
.why-iq-v2 .why-section-heading h2 span,
.synergy-plans-page .plans-section-head h2 span,
.synergy-science-page .science-section-head h2 span,
.synergy-organisations-page .swi-section-head h2 span,
.synergy-learn-page .learn-section-head h2 span,
.vision-section h2 span {
  color: var(--iqm-hero-blue) !important;
  box-shadow: inset 0 -.14em 0 rgba(204,255,102,.72);
}

/* Home follows the cleaner mock-up: no second interactive network competing with the background artwork. */
.iqm-home-page .sy-hero-grid {
  grid-template-columns: minmax(0, 720px) 1fr !important;
  min-height: 100%;
  align-items: center !important;
}
.iqm-home-page .sy-hero-grid > div:first-child {
  max-width: 700px;
}
.iqm-home-page .sy-hero .sy-network-frame {
  visibility: hidden;
  pointer-events: none;
}
.iqm-home-page .sy-hero-tagline {
  margin: .1rem 0 .65rem !important;
  color: #17659f !important;
  font-size: clamp(1.03rem,1.35vw,1.18rem) !important;
}
.iqm-home-page .sy-hero-lede {
  max-width: 47ch !important;
  margin-top: .65rem !important;
}
.iqm-home-page .sy-hero-proof {
  margin-top: 1rem !important;
  color: #42627b !important;
}
.iqm-home-page .sy-hero-proof a {
  color: #155f9e !important;
}
.iqm-home-page .iqm-hero-benefits {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: .55rem;
  max-width: 700px;
  margin-top: 1.2rem;
}
.iqm-home-page .iqm-hero-benefits a,
.iqm-home-page .iqm-hero-benefits span {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
  padding: .68rem .72rem;
  border: 1px solid rgba(64,134,187,.17);
  border-radius: 14px;
  color: #214f73;
  background: rgba(255,255,255,.72);
  box-shadow: 0 8px 22px rgba(32,95,142,.06);
  backdrop-filter: blur(10px);
  font-size: .76rem;
  font-weight: 760;
  line-height: 1.2;
  text-decoration: none;
}
.iqm-home-page .iqm-hero-benefits b {
  display: grid;
  place-items: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  color: #0b75cf;
  background: linear-gradient(145deg,#e9f7ff,#f5ffdf);
  font-size: .68rem;
}

/* On short desktop screens, remove non-essential hero chrome before allowing page scroll. */
@media (min-width: 901px) and (max-height: 800px) {
  :root {
    --iqm-hero-h1-size: clamp(2.65rem, 4.5vw, 4.1rem);
    --iqm-hero-lede-size: .98rem;
  }
  .synergy-plans-page .plans-trust-row,
  .synergy-organisations-page .swi-badges,
  .synergy-organisations-page .swi-hero-note,
  .why-iq-v2 .why-hero-note,
  .synergy-learn-page .learn-hero-lede + .learn-hero-lede,
  .iqm-home-page .sy-hero-proof {
    display: none !important;
  }
  .iqm-home-page .iqm-hero-benefits {
    margin-top: .8rem;
  }
  .iqm-home-page .sy-hero .sy-actions,
  .synergy-home-v1 .sy-hero .sy-actions {
    margin-top: 1rem;
  }
}

/* Mobile is an intentionally simpler composition, not a squeezed desktop hero. */
@media (max-width: 900px) {
  :root {
    --iqm-hero-h1-size: clamp(2.35rem, 10.5vw, 3.45rem);
    --iqm-hero-lede-size: 1rem;
    --iqm-menu-section-title-size: clamp(1.8rem, 8vw, 2.45rem);
  }
  .iqm-home-page .sy-hero,
  .synergy-start-v1 .demo-hero,
  .how-page .how-hero,
  .why-iq-v2 .sy-hero,
  .synergy-plans-page .plans-hero,
  .synergy-science-page .science-hero,
  .synergy-organisations-page .swi-hero,
  .synergy-learn-page .learn-hero,
  .synergy-faq-page .faq-hero-v2,
  .workflow-page .wf-page-hero,
  .vision-hero {
    height: auto;
    min-height: 0;
    padding-block: 2.6rem 3rem !important;
    background-image:
      linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.91) 57%, rgba(255,255,255,.75) 100%),
      var(--iqm-hero-bg) !important;
    background-position: 62% center !important;
  }

  .iqm-home-page .sy-hero-grid,
  .synergy-start-v1 .demo-hero-inner,
  .how-page .how-hero-grid,
  .why-iq-v2 .why-hero-grid,
  .synergy-plans-page .plans-hero-grid,
  .synergy-science-page .science-hero-grid,
  .synergy-organisations-page .swi-hero-grid,
  .synergy-learn-page .learn-hero-grid,
  .vision-hero-grid,
  .workflow-page .wf-page-hero__inner {
    grid-template-columns: 1fr !important;
    gap: 1.35rem !important;
  }

  .iqm-home-page .sy-hero .sy-network-frame {
    display: none !important;
  }

  .iqm-home-page .iqm-hero-benefits {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .iqm-home-page .sy-hero .sy-actions,
  .synergy-start-v1 .demo-hero .sy-actions,
  .how-page .how-hero .sy-actions,
  .why-iq-v2 .sy-hero .sy-actions,
  .synergy-plans-page .plans-hero .sy-actions,
  .synergy-science-page .science-hero .sy-actions,
  .synergy-organisations-page .swi-hero .sy-actions,
  .synergy-learn-page .learn-hero .sy-actions,
  .vision-hero .sy-actions {
    align-items: stretch;
  }

  .iqm-home-page .sy-hero .sy-actions > *,
  .synergy-start-v1 .demo-hero .sy-actions > *,
  .how-page .how-hero .sy-actions > *,
  .why-iq-v2 .sy-hero .sy-actions > *,
  .synergy-plans-page .plans-hero .sy-actions > *,
  .synergy-science-page .science-hero .sy-actions > *,
  .synergy-organisations-page .swi-hero .sy-actions > *,
  .synergy-learn-page .learn-hero .sy-actions > *,
  .vision-hero .sy-actions > * {
    justify-content: center;
  }

  .science-transfer-map,
  .plans-network-wrap,
  .swi-network-card,
  .learn-map,
  .wf-hero-note {
    max-height: 330px;
    overflow: hidden;
  }
}

@media (max-width: 560px) {
  .iqm-home-page .iqm-hero-benefits {
    grid-template-columns: 1fr 1fr;
    gap: .4rem;
  }
  .iqm-home-page .iqm-hero-benefits a,
  .iqm-home-page .iqm-hero-benefits span {
    padding: .58rem;
    font-size: .7rem;
  }
  .iqm-home-page .sy-hero-proof {
    font-size: .74rem;
  }
}


/* Light-theme compatibility for page-specific hero content retained from the former dark system. */
.how-page .how-lede {
  max-width: 48ch;
  color: var(--iqm-hero-muted) !important;
  font-size: var(--iqm-hero-lede-size) !important;
  line-height: 1.55 !important;
}
.how-page .how-proof {
  color: #59748b !important;
}
.how-page .how-value-card {
  gap: 12px;
}
.how-page .how-value-card article {
  padding: 22px 24px;
  border: 1px solid rgba(56,137,197,.18) !important;
  background: rgba(255,255,255,.78) !important;
  box-shadow: 0 16px 42px rgba(31,91,137,.10) !important;
  backdrop-filter: blur(12px);
}
.how-page .how-value-card h2 {
  color: var(--iqm-hero-ink) !important;
}
.how-page .how-value-card p {
  color: var(--iqm-hero-muted) !important;
}
.how-page .how-value-card strong {
  color: #17659f !important;
}
.how-page .how-value-card article:last-child strong {
  color: #547f13 !important;
}

.sy-start-play .demo-hero-aside {
  border-left-color: rgba(38,112,170,.28) !important;
  color: #55728b !important;
}
.sy-start-play .demo-hero-aside strong {
  color: var(--iqm-hero-ink) !important;
}
.sy-start-play .demo-hero-aside p {
  color: var(--iqm-hero-muted) !important;
}
.sy-start-play .demo-hero-aside .sy-motion {
  color: #fff !important;
  border-color: transparent !important;
  background: #18466d !important;
}

/* The new hero artwork already expresses a connected network. Avoid duplicating
   the full interactive network inside the Why IQ hero; it remains available in-page. */
.why-iq-v2 .sy-hero .sy-network-frame {
  display: none !important;
}
.why-iq-v2 .why-hero-grid {
  grid-template-columns: minmax(0, 760px) 1fr !important;
}
.why-iq-v2 .why-hero-note,
.why-iq-v2 .why-hero-note strong {
  color: #45677f !important;
}
.why-iq-v2 .why-hero-note {
  padding-left: 14px;
  border-left: 3px solid var(--iqm-hero-lime);
}

/* Keep retained right-hand hero cards legible on the light artwork. */
.synergy-plans-page .plans-network-wrap,
.synergy-science-page .science-transfer-map,
.synergy-organisations-page .swi-network-card,
.synergy-learn-page .learn-map,
.workflow-page .wf-hero-note {
  border-color: rgba(56,137,197,.18) !important;
  box-shadow: 0 16px 42px rgba(31,91,137,.10) !important;
}

.workflow-page .wf-hero-note {
  color: var(--iqm-hero-muted) !important;
  background: rgba(255,255,255,.80) !important;
  backdrop-filter: blur(12px);
}
.workflow-page .wf-hero-note strong {
  color: var(--iqm-hero-ink) !important;
}
.workflow-page .wf-hero-note span {
  color: #126caf !important;
}

@media (min-width: 901px) and (max-height: 800px) {
  .sy-start-play .demo-hero-lede:last-of-type {
    display: none !important;
  }
  .how-page .how-proof {
    display: none !important;
  }
}

@media (min-width: 901px) {
  .why-iq-v2 .sy-hero .sy-hero-lede:nth-of-type(4),
  .why-iq-v2 .sy-hero .why-hero-note {
    display: none !important;
  }
}


/* Support is a utility page with an older shell; bring its visible header into the same system. */
.support .site-header {
  background: rgba(255,255,255,.96) !important;
  border-bottom: 1px solid rgba(77,139,185,.16) !important;
  box-shadow: 0 6px 24px rgba(27,90,135,.05) !important;
}
.support .site-header :is(.brand,.tagline,.nav-link) {
  color: #173a61 !important;
}
.support .site-header .nav-link:hover,
.support .site-header .nav-link:focus-visible {
  color: #087cf2 !important;
}
.support .sp-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--iqm-hero-ink) !important;
  background-color: #f7fbff !important;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.985) 0%, rgba(255,255,255,.94) 31%, rgba(255,255,255,.72) 48%, rgba(255,255,255,.23) 70%, rgba(255,255,255,.08) 100%),
    var(--iqm-hero-bg) !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}
.support .sp-hero-title {
  margin-top: .4rem;
  margin-bottom: .9rem;
  color: var(--iqm-hero-ink) !important;
  font-family: ui-rounded, "Trebuchet MS", system-ui, sans-serif !important;
  font-size: var(--iqm-hero-h1-size) !important;
  font-weight: 850 !important;
  line-height: var(--iqm-hero-h1-line) !important;
  letter-spacing: var(--iqm-hero-h1-tracking) !important;
}
.support .sp-hero-eyebrow {
  color: #126caf !important;
}
.support .sp-hero-sub {
  color: var(--iqm-hero-muted) !important;
  font-size: var(--iqm-hero-lede-size) !important;
  line-height: 1.55 !important;
}
.support .sp-hero-sub a { color: #126caf !important; }
.support .sp-hero-btns .btn-lime {
  color: #fff !important;
  border-color: transparent !important;
  background: linear-gradient(135deg,#087cf2,#13bff0) !important;
  box-shadow: 0 12px 28px rgba(13,130,239,.22) !important;
}
.support .sp-hero-btns .btn-ghost-dk {
  color: #0f5792 !important;
  border-color: rgba(37,126,194,.26) !important;
  background: rgba(255,255,255,.82) !important;
}
.support .sp-section-title {
  color: var(--iqm-hero-ink) !important;
  font-family: ui-rounded, "Trebuchet MS", system-ui, sans-serif !important;
  font-size: var(--iqm-menu-section-title-size) !important;
  line-height: var(--iqm-menu-section-title-line) !important;
  letter-spacing: var(--iqm-menu-section-title-tracking) !important;
}
@media (min-width: 901px) {
  .support .support-page { padding-top: 64px; }
  .support .sp-hero {
    height: min(720px, calc(100dvh - 64px));
    padding-block: clamp(1.8rem,4vh,3.25rem) !important;
    display: flex;
    align-items: center;
  }
  .support .sp-hero-inner {
    width: min(920px, calc(100% - 5rem));
    max-width: 920px;
  }
}
@media (max-width: 900px) {
  .support .sp-hero {
    height: auto;
    min-height: 0;
    padding-block: 2.6rem 3rem !important;
    background-image:
      linear-gradient(180deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.91) 57%,rgba(255,255,255,.75) 100%),
      var(--iqm-hero-bg) !important;
  }
}

/* Pricing follows the cleaner hero composition: the shared artwork replaces the duplicate hero network. */
.synergy-plans-page .plans-hero .plans-network-wrap {
  display: none !important;
}
.synergy-plans-page .plans-hero-grid--focused {
  grid-template-columns: minmax(0, 780px) 1fr !important;
}
.synergy-plans-page .plans-hero-grid--focused > div:first-child {
  max-width: 780px !important;
}
.synergy-plans-page .plans-trust-pill {
  color: #2e5b7b !important;
  border-color: rgba(56,137,197,.20) !important;
  background: rgba(255,255,255,.74) !important;
}

@media (min-width: 901px) {
  .synergy-plans-page .plans-hero-lede + .plans-hero-lede {
    display: none !important;
  }
}

@media (min-width: 901px) {
  .synergy-science-page .science-hero-lede:last-of-type {
    display: none !important;
  }
}

/* Keep the functional SWI network, but size it to the shared desktop hero envelope. */
@media (min-width: 901px) {
  .synergy-organisations-page .swi-network-card {
    padding: .82rem !important;
  }
  .synergy-organisations-page .swi-network {
    width: min(420px, 100%) !important;
  }
  .synergy-organisations-page .swi-network-card-top {
    padding-bottom: .4rem !important;
    font-size: .68rem !important;
  }
  .synergy-organisations-page .swi-interaction-cue {
    margin-top: .35rem !important;
  }
}
@media (max-width: 900px) {
  .synergy-organisations-page .swi-network-card {
    max-height: none !important;
    overflow: visible !important;
  }
}

@media (min-width: 901px) {
  .synergy-organisations-page .swi-hero .swi-badges,
  .synergy-organisations-page .swi-hero .swi-hero-note {
    display: none !important;
  }
  .synergy-organisations-page .swi-network {
    width: min(390px, 100%) !important;
  }
}

/* Learn and FAQ use the shared neural artwork as the hero visual; detailed navigation remains immediately below. */
@media (min-width: 901px) {
  .synergy-learn-page .learn-hero .learn-map {
    display: none !important;
  }
  .synergy-learn-page .learn-hero-grid {
    grid-template-columns: minmax(0, 780px) 1fr !important;
  }
  .synergy-learn-page .learn-hero-lede + .learn-hero-lede {
    display: none !important;
  }
  .synergy-faq-page .faq-hero-map-v2 {
    display: none !important;
  }
  .synergy-faq-page .faq-hero-grid-v2 {
    grid-template-columns: minmax(0, 760px) 1fr !important;
  }
}


/* Vision uses the shared artwork as its visual on desktop; the full seven-step model is explained below. */
@media (min-width: 901px) {
  .vision-hero .vision-stack {
    display: none !important;
  }
  .vision-hero-grid {
    grid-template-columns: minmax(0, 780px) 1fr !important;
  }
  .vision-hero-grid > div:first-child {
    max-width: 780px;
  }
}

/* Mobile Science prioritises the explanation; the dense transfer diagram returns in the page body. */
@media (max-width: 900px) {
  .synergy-science-page .science-hero .science-transfer-map {
    display: none !important;
  }
  .synergy-science-page .science-hero-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Short desktops preserve the shared type hierarchy but reduce whitespace before reducing content. */
@media (min-width: 901px) and (max-height: 800px) {
  .iqm-home-page .sy-hero,
  .synergy-start-v1 .demo-hero,
  .how-page .how-hero,
  .why-iq-v2 .sy-hero,
  .synergy-plans-page .plans-hero,
  .synergy-science-page .science-hero,
  .synergy-organisations-page .swi-hero,
  .synergy-learn-page .learn-hero,
  .synergy-faq-page .faq-hero-v2,
  .workflow-page .wf-page-hero,
  .vision-hero {
    padding-block: 1.25rem !important;
  }
  .sy-start-play .demo-hero-inner,
  .how-page .how-hero-grid,
  .synergy-science-page .science-hero-grid {
    gap: 1.5rem !important;
  }
}


/* Final public-site hierarchy lock: one hero lede scale everywhere. */
.iqm-home-page .sy-hero-lede,
.synergy-start-v1 .demo-hero-lede,
.how-page .how-lede,
.why-iq-v2 .sy-hero-lede,
.synergy-plans-page .plans-hero-lede,
.synergy-science-page .science-hero-lede,
.synergy-organisations-page .swi-hero-lede,
.synergy-learn-page .learn-hero-lede,
.synergy-faq-page .faq-hero-lede-v2,
.workflow-page .wf-page-hero .wf-lede,
.vision-hero-grid > div > p:not(.sy-kicker),
.support .sp-hero-sub {
  font-size: var(--iqm-hero-lede-size) !important;
  line-height: 1.55 !important;
}

/* Shared navigation/brand polish across the current public shells. */
.synergy-home-v1 .sy-header,
.workflow-page .wf-header,
.support .site-header {
  min-height: 78px;
}
.synergy-home-v1 .sy-brand,
.workflow-page .wf-brand,
.support .site-header .brand {
  font-family: ui-rounded, "Trebuchet MS", system-ui, sans-serif !important;
  font-size: 1.38rem !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  letter-spacing: -.035em !important;
  text-transform: none !important;
  color: #102a4a !important;
  text-decoration: none !important;
}
.workflow-page .wf-brand {
  gap: .28rem !important;
}
.workflow-page .wf-brand__mark {
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #0a82ea !important;
  font-size: 1.38rem !important;
  font-weight: 900 !important;
  letter-spacing: -.04em !important;
}
.workflow-page .wf-brand > span:last-child {
  color: #102a4a !important;
}
.support .site-header .brand::first-letter {
  color: #0a82ea;
}
.synergy-home-v1 .sy-nav a,
.workflow-page .wf-nav a,
.support .site-nav .nav-link {
  position: relative;
  color: #294760 !important;
  font-size: .875rem !important;
  font-weight: 650 !important;
  text-decoration: none !important;
}
.synergy-home-v1 .sy-nav a::after,
.workflow-page .wf-nav a::after,
.support .site-nav .nav-link::after {
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: 4px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg,#0b82ee,#9be600);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .18s ease;
}
.synergy-home-v1 .sy-nav a:hover::after,
.synergy-home-v1 .sy-nav a[aria-current]::after,
.workflow-page .wf-nav a:hover::after,
.workflow-page .wf-nav a[aria-current="page"]::after,
.support .site-nav .nav-link:hover::after {
  transform: scaleX(1);
}

/* Interaction polish: subtle, fast, and never required for comprehension. */
.iqm-home-page .iqm-hero-benefits a,
.how-page .how-value-card article,
.synergy-plans-page .plans-route-step,
.synergy-science-page .transfer-card,
.synergy-organisations-page .swi-value-card,
.synergy-learn-page .learn-format,
.workflow-page .wf-card,
.support .sp-card {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
}
.iqm-home-page .iqm-hero-benefits a:hover,
.how-page .how-value-card article:hover,
.synergy-plans-page .plans-route-step:hover,
.synergy-science-page .transfer-card:hover,
.synergy-organisations-page .swi-value-card:hover,
.synergy-learn-page .learn-format:hover,
.workflow-page .wf-card:hover,
.support .sp-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(28,91,139,.12);
}
.iqm-home-page .sy-hero .sy-actions a,
.synergy-start-v1 .demo-hero .sy-actions a,
.how-page .how-hero .sy-actions a,
.why-iq-v2 .sy-hero .sy-actions a,
.synergy-plans-page .plans-hero .sy-actions a,
.synergy-science-page .science-hero .sy-actions a,
.synergy-organisations-page .swi-hero .sy-actions a,
.synergy-learn-page .learn-hero .sy-actions a,
.synergy-faq-page .faq-hero-v2 .sy-actions a,
.workflow-page .wf-page-hero .wf-btn,
.vision-hero .sy-actions a,
.support .sp-hero-btns a {
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease;
}
.iqm-home-page .sy-hero .sy-actions a:hover,
.synergy-start-v1 .demo-hero .sy-actions a:hover,
.how-page .how-hero .sy-actions a:hover,
.why-iq-v2 .sy-hero .sy-actions a:hover,
.synergy-plans-page .plans-hero .sy-actions a:hover,
.synergy-science-page .science-hero .sy-actions a:hover,
.synergy-organisations-page .swi-hero .sy-actions a:hover,
.synergy-learn-page .learn-hero .sy-actions a:hover,
.synergy-faq-page .faq-hero-v2 .sy-actions a:hover,
.workflow-page .wf-page-hero .wf-btn:hover,
.vision-hero .sy-actions a:hover,
.support .sp-hero-btns a:hover {
  transform: translateY(-2px);
}

/* Finite entrance animation: signals polish without slowing interaction. */
@keyframes iqm-hero-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes iqm-hero-accent {
  from { opacity: 0; transform: scaleX(.55); }
  to   { opacity: 1; transform: scaleX(1); }
}
@media (prefers-reduced-motion: no-preference) {
  .iqm-home-page .sy-hero h1,
  .synergy-start-v1 .demo-hero h1,
  .how-page .how-hero h1,
  .why-iq-v2 .sy-hero h1,
  .synergy-plans-page .plans-hero h1,
  .synergy-science-page .science-hero h1,
  .synergy-organisations-page .swi-hero h1,
  .synergy-learn-page .learn-hero h1,
  .synergy-faq-page .faq-hero-v2 h1,
  .workflow-page .wf-page-hero h1,
  .vision-hero h1,
  .support .sp-hero-title {
    animation: iqm-hero-rise .52s cubic-bezier(.2,.72,.2,1) both;
  }
  .iqm-home-page .sy-hero :is(.sy-hero-tagline,.sy-hero-lede,.sy-actions,.iqm-hero-benefits),
  .synergy-start-v1 .demo-hero :is(.demo-hero-lede,.demo-hero-aside),
  .how-page .how-hero :is(.how-lede,.sy-actions,.how-value-card),
  .why-iq-v2 .sy-hero :is(.sy-hero-lede,.sy-actions),
  .synergy-plans-page .plans-hero :is(.plans-hero-lede,.sy-actions,.plans-trust-row),
  .synergy-science-page .science-hero :is(.science-hero-lede,.sy-actions,.science-transfer-map),
  .synergy-organisations-page .swi-hero :is(.swi-hero-lede,.sy-actions,.swi-network-card),
  .synergy-learn-page .learn-hero :is(.learn-hero-lede,.sy-actions,.learn-map),
  .synergy-faq-page .faq-hero-v2 :is(.faq-hero-lede-v2,.sy-actions),
  .workflow-page .wf-page-hero :is(.wf-lede,.wf-hero-note,.wf-btn),
  .vision-hero :is(p:not(.sy-kicker),.sy-actions),
  .support .sp-hero :is(.sp-hero-sub,.sp-hero-btns) {
    animation: iqm-hero-rise .52s .08s cubic-bezier(.2,.72,.2,1) both;
  }
  .iqm-home-page .sy-hero h1 span::after,
  .synergy-start-v1 .demo-hero h1 span::after,
  .how-page .how-hero h1 span::after,
  .why-iq-v2 .sy-hero h1 span::after,
  .synergy-plans-page .plans-hero h1 span::after,
  .synergy-science-page .science-hero h1 span::after,
  .synergy-organisations-page .swi-hero h1 span::after,
  .synergy-learn-page .learn-hero h1 span::after,
  .synergy-faq-page .faq-hero-v2 h1 span::after,
  .vision-hero h1 span::after,
  .workflow-page .wf-page-hero h1 strong::after {
    transform-origin: left center;
    animation: iqm-hero-accent .48s .28s ease-out both;
  }
}

/* Final fit corrections. */
@media (min-width: 901px) {
  .vision-hero-grid > div > p:nth-of-type(3) {
    display: none !important;
  }
}
@media (max-width: 900px) {
  .synergy-science-page .science-hero,
  .synergy-science-page .science-hero-grid,
  .synergy-science-page .science-hero-grid > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .synergy-science-page .science-hero h1,
  .synergy-science-page .science-hero-lede,
  .synergy-science-page .science-hero .sy-actions {
    overflow-wrap: anywhere;
  }
}

/* Brand lock: blue IQ, navy Mindware in every current header. */
.synergy-home-v1 .sy-brand {
  color: #0a82ea !important;
}
.synergy-home-v1 .sy-brand span {
  color: #102a4a !important;
}
.support .site-header .brand > span {
  color: #0a82ea !important;
}
.support .site-header .brand {
  color: #102a4a !important;
}

/* Keep utility-page CTA wording visually subordinate to navigation. */
.workflow-page .wf-header__cta {
  min-height: 38px !important;
  padding: .55rem .9rem !important;
  font-size: .78rem !important;
  box-shadow: 0 6px 16px rgba(13,130,239,.12) !important;
}


/* Homepage: preserve the full Navigate possibility copy while keeping the
   shared title scale and fitting the complete desktop hero in one viewport. */
@media (min-width: 901px) {
  .iqm-home-page .sy-hero {
    padding-block: .8rem !important;
  }
  .iqm-home-page .sy-hero .sy-kicker {
    margin-bottom: .45rem !important;
  }
  .iqm-home-page .sy-hero h1 {
    margin-top: .15rem !important;
    margin-bottom: .45rem !important;
  }
  .iqm-home-page .sy-hero-tagline {
    margin: .05rem 0 .25rem !important;
  }
  .iqm-home-page .sy-hero .sy-hero-lede {
    margin: .32rem 0 0 !important;
    line-height: 1.42 !important;
  }
  .iqm-home-page .sy-hero .sy-actions {
    margin-top: .7rem !important;
  }
  .iqm-home-page .sy-hero-proof {
    margin-top: .45rem !important;
  }
}


/* Header brand fix: use one clean text lock-up only.
   The legacy homepage CSS injects a bitmap logo as the anchor background; clear it. */
.synergy-home-v1 .sy-brand {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  overflow: visible !important;
  background: none !important;
  color: #0a82ea !important;
  font-size: 1.38rem !important;
  line-height: 1 !important;
}
.synergy-home-v1 .sy-brand span {
  display: inline !important;
  color: #102a4a !important;
}
.workflow-page .wf-brand__mark {
  display: none !important;
}

/* Ensure the hero artwork is visibly present on the right, rather than washed out. */
@media (min-width: 901px) {
  .iqm-home-page .sy-hero,
  .synergy-start-v1 .demo-hero,
  .how-page .how-hero,
  .why-iq-v2 .sy-hero,
  .synergy-plans-page .plans-hero,
  .synergy-science-page .science-hero,
  .synergy-organisations-page .swi-hero,
  .synergy-learn-page .learn-hero,
  .synergy-faq-page .faq-hero-v2,
  .workflow-page .wf-page-hero,
  .vision-hero {
    background-position: center center, 66% center !important;
  }
}

@media (max-width: 900px) {
  .iqm-home-page .sy-hero,
  .synergy-start-v1 .demo-hero,
  .how-page .how-hero,
  .why-iq-v2 .sy-hero,
  .synergy-plans-page .plans-hero,
  .synergy-science-page .science-hero,
  .synergy-organisations-page .swi-hero,
  .synergy-learn-page .learn-hero,
  .synergy-faq-page .faq-hero-v2,
  .workflow-page .wf-page-hero,
  .vision-hero {
    background-image:
      linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.88) 54%, rgba(255,255,255,.70) 100%),
      var(--iqm-hero-bg) !important;
    background-position: center center, 64% center !important;
    background-size: cover, cover !important;
  }
}


/* Integrated hero composition — full artwork + real product surface.
   Content remains unchanged; this is presentation only. */
:root {
  --iqm-header-logo: url("/assets/branding/iq-mindware-logo-colour.png?v=20260922-integrated-1");
}

/* One image lock-up across current public headers; no duplicate text/image stack. */
.synergy-home-v1 .sy-brand,
.workflow-page .wf-brand,
.support .site-header .brand {
  display: block !important;
  flex: 0 0 220px !important;
  width: 220px !important;
  height: 56px !important;
  min-width: 0 !important;
  overflow: hidden !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: -9999px;
  white-space: nowrap !important;
  background: var(--iqm-header-logo) left center / contain no-repeat !important;
}
.synergy-home-v1 .sy-brand span,
.workflow-page .wf-brand > *,
.support .site-header .brand > * {
  display: none !important;
}
.synergy-home-v1 .sy-header-inner,
.workflow-page .wf-header__inner,
.support .site-header .site-header-inner {
  min-height: 82px !important;
}

@media (max-width: 1120px) and (min-width: 721px) {
  .synergy-home-v1 .sy-brand,
  .workflow-page .wf-brand,
  .support .site-header .brand {
    flex-basis: 178px !important;
    width: 178px !important;
    height: 50px !important;
  }
}
@media (max-width: 720px) {
  .synergy-home-v1 .sy-brand,
  .workflow-page .wf-brand,
  .support .site-header .brand {
    flex-basis: 158px !important;
    width: 158px !important;
    height: 46px !important;
  }
}

/* Homepage is one continuous visual composition, not a white copy column plus background. */
.iqm-home-page .sy-hero {
  background-color: #eff9ff !important;
  background-image:
    linear-gradient(90deg,
      rgba(255,255,255,.89) 0%,
      rgba(255,255,255,.82) 24%,
      rgba(255,255,255,.54) 39%,
      rgba(255,255,255,.16) 55%,
      rgba(255,255,255,.02) 72%,
      rgba(255,255,255,0) 100%),
    var(--iqm-hero-bg) !important;
  background-position: center center, center center !important;
  background-size: cover, cover !important;
}

/* Preserve the visual richness at the left edge without sacrificing copy contrast. */
.iqm-home-page .sy-hero::before {
  content: "" !important;
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02)),
    radial-gradient(ellipse at 23% 45%,rgba(255,255,255,.55),transparent 47%);
}

/* Bring the genuine Synergy IQ network back as the product panel shown in the hero. */
@media (min-width: 901px) {
  .iqm-home-page .sy-hero-grid {
    grid-template-columns: minmax(0, 610px) minmax(360px, 430px) !important;
    justify-content: space-between;
    gap: clamp(2rem,4vw,4.4rem) !important;
    align-items: center !important;
  }
  .iqm-home-page .sy-hero-grid > div:first-child {
    max-width: 610px !important;
    position: relative;
    z-index: 2;
  }
  .iqm-home-page .sy-hero .sy-network-frame {
    visibility: visible !important;
    display: block !important;
    pointer-events: auto !important;
    width: min(430px,100%) !important;
    justify-self: end !important;
    padding: .95rem 1rem .82rem !important;
    border: 1px solid rgba(69,144,196,.22) !important;
    border-radius: 28px !important;
    color: #173a61 !important;
    background:
      linear-gradient(145deg,rgba(255,255,255,.88),rgba(247,252,255,.72)) !important;
    box-shadow:
      0 24px 70px rgba(29,91,137,.16),
      inset 0 1px 0 rgba(255,255,255,.9) !important;
    backdrop-filter: blur(17px) saturate(1.15);
  }
  .iqm-home-page .sy-network-top {
    color: #547189 !important;
    font-size: .7rem !important;
  }
  .iqm-home-page .sy-network-top strong {
    color: #0d4173 !important;
    font-size: .82rem;
    letter-spacing: .08em;
  }
  .iqm-home-page .sy-network-top .sy-network-learn-cue {
    min-height: 30px !important;
    padding: .32rem .62rem !important;
    color: #234b18 !important;
    background: rgba(204,255,102,.62) !important;
    border: 1px solid rgba(129,190,24,.20);
    box-shadow: none !important;
    font-size: .68rem !important;
  }
  .iqm-home-page .sy-network {
    width: 100% !important;
    margin-top: .35rem !important;
  }
  .iqm-home-page .sy-orbit-line {
    stroke: #4e92bf !important;
    stroke-opacity: .28 !important;
  }
  .iqm-home-page .sy-network-edge {
    stroke: #4686b1 !important;
    stroke-opacity: .36 !important;
  }
  .iqm-home-page .sy-network-edge.is-active {
    stroke: #0d8ded !important;
    stroke-opacity: .95 !important;
  }
  .iqm-home-page .sy-node {
    color: #164b71 !important;
    background: rgba(255,255,255,.92) !important;
    border-color: rgba(50,131,188,.24) !important;
    box-shadow: 0 7px 18px rgba(31,92,138,.10) !important;
  }
  .iqm-home-page .sy-node:hover,
  .iqm-home-page .sy-node:focus-visible,
  .iqm-home-page .sy-node.is-active {
    color: #075d9c !important;
    border-color: rgba(13,141,237,.48) !important;
    background: rgba(239,250,255,.98) !important;
    box-shadow: 0 10px 24px rgba(31,92,138,.15) !important;
  }
  .iqm-home-page .sy-node-core {
    color: #fff !important;
    background: linear-gradient(145deg,#0b82ee,#17b9e9) !important;
    border-color: rgba(255,255,255,.88) !important;
    box-shadow: 0 0 0 7px rgba(204,255,102,.22),0 12px 30px rgba(11,130,238,.22) !important;
  }
  .iqm-home-page .sy-network-detail {
    min-height: 76px !important;
    padding-top: .55rem !important;
    border-top-color: rgba(68,127,168,.15) !important;
  }
  .iqm-home-page .sy-network-detail strong {
    color: #123f65 !important;
  }
  .iqm-home-page .sy-network-detail p {
    color: #5a7489 !important;
  }
  .iqm-home-page .sy-network-status {
    color: #527710 !important;
    background: rgba(204,255,102,.44) !important;
  }
}

/* On short desktops retain the product-card signal but slightly reduce its footprint. */
@media (min-width: 901px) and (max-height: 800px) {
  .iqm-home-page .sy-hero-grid {
    grid-template-columns: minmax(0, 590px) minmax(330px, 390px) !important;
    gap: 2rem !important;
  }
  .iqm-home-page .sy-hero .sy-network-frame {
    width: min(390px,100%) !important;
    padding: .72rem .8rem .65rem !important;
  }
  .iqm-home-page .sy-network-detail {
    min-height: 62px !important;
  }
}

/* Mobile uses the same full-bleed artwork but does not squeeze the network card under the copy. */
@media (max-width: 900px) {
  .iqm-home-page .sy-hero {
    background-image:
      linear-gradient(180deg,rgba(255,255,255,.93) 0%,rgba(255,255,255,.82) 57%,rgba(255,255,255,.66) 100%),
      var(--iqm-hero-bg) !important;
    background-position: center center, 58% center !important;
    background-size: cover, cover !important;
  }
  .iqm-home-page .sy-hero .sy-network-frame {
    display: none !important;
  }
}


/* Integrated header lock-up: icon and wordmark sit on one baseline. */
.synergy-home-v1 .sy-brand,
.workflow-page .wf-brand,
.support .site-header .brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: .68rem !important;
  flex: 0 0 auto !important;
  width: auto !important;
  height: 58px !important;
  overflow: visible !important;
  color: #102a4a !important;
  font-size: 1.48rem !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  text-indent: 0 !important;
  background: url("/assets/branding/iq-mindware-eye.png?v=20260922-integrated-1") left center / 58px 58px no-repeat !important;
  padding-left: 67px !important;
}
.synergy-home-v1 .sy-brand span {
  display: inline !important;
  color: #102a4a !important;
}
.workflow-page .wf-brand > * {
  display: inline !important;
}
.workflow-page .wf-brand__mark {
  display: none !important;
}
.support .site-header .brand > * {
  display: inline !important;
}
@media (max-width: 720px) {
  .synergy-home-v1 .sy-brand,
  .workflow-page .wf-brand,
  .support .site-header .brand {
    height: 48px !important;
    padding-left: 55px !important;
    background-size: 48px 48px !important;
    font-size: 1.22rem !important;
  }
}

/* Slightly more compact genuine product card so the full hero remains one-screen. */
@media (min-width: 901px) {
  .iqm-home-page .sy-hero-grid {
    grid-template-columns: minmax(0, 600px) minmax(330px, 390px) !important;
    gap: clamp(1.5rem,3vw,3rem) !important;
  }
  .iqm-home-page .sy-hero .sy-network-frame {
    width: min(390px,100%) !important;
    padding: .72rem .78rem .62rem !important;
    border-radius: 24px !important;
  }
  .iqm-home-page .sy-network-top {
    min-height: 28px;
  }
  .iqm-home-page .sy-network-top .sy-network-learn-cue {
    max-width: 185px;
  }
  .iqm-home-page .sy-network-detail {
    min-height: 54px !important;
    padding-top: .42rem !important;
  }
  .iqm-home-page .sy-network-detail p {
    margin-top: .2rem !important;
    font-size: .78rem !important;
  }
}
@media (min-width: 901px) and (max-height: 800px) {
  .iqm-home-page .sy-hero-grid {
    grid-template-columns: minmax(0, 570px) minmax(300px, 350px) !important;
  }
  .iqm-home-page .sy-hero .sy-network-frame {
    width: min(350px,100%) !important;
  }
  .iqm-home-page .sy-network-detail {
    min-height: 48px !important;
  }
}


/* Homepage title should honour its authored two-line break on desktop.
   Widening the copy column avoids the four-line wrap seen in the first integrated preview. */
@media (min-width: 1100px) {
  .iqm-home-page .sy-hero-grid {
    grid-template-columns: minmax(0, 690px) minmax(320px, 370px) !important;
    gap: clamp(1.4rem,2.6vw,2.8rem) !important;
  }
  .iqm-home-page .sy-hero-grid > div:first-child {
    max-width: 690px !important;
  }
  .iqm-home-page .sy-hero h1 {
    max-width: none !important;
    white-space: nowrap;
  }
  .iqm-home-page .sy-hero .sy-network-frame {
    width: min(370px,100%) !important;
  }
}
@media (min-width: 1100px) and (max-height: 800px) {
  .iqm-home-page .sy-hero-grid {
    grid-template-columns: minmax(0, 670px) minmax(300px, 340px) !important;
  }
  .iqm-home-page .sy-hero .sy-network-frame {
    width: min(340px,100%) !important;
  }
}


/* Start Here: match the How It Works hero geometry and white-card treatment. */
@media (min-width: 901px) {
  .sy-start-play .demo-hero-inner {
    grid-template-columns: minmax(0,1.15fr) minmax(320px,.85fr) !important;
    gap: clamp(36px,6vw,84px) !important;
    align-items: center !important;
  }
  .sy-start-play .demo-hero-aside {
    justify-self: stretch !important;
    width: 100% !important;
    max-width: 390px !important;
    margin: 0 !important;
    padding: 22px 24px !important;
    border: 1px solid rgba(56,137,197,.18) !important;
    border-top: 4px solid #22aaff !important;
    border-left: 1px solid rgba(56,137,197,.18) !important;
    border-radius: 24px !important;
    background: rgba(255,255,255,.82) !important;
    box-shadow: 0 16px 42px rgba(31,91,137,.10) !important;
    backdrop-filter: blur(12px);
    color: #55728b !important;
  }
  .sy-start-play .demo-hero-aside > span {
    display: grid !important;
    grid-template-columns: 2rem 1fr !important;
    align-items: baseline !important;
    gap: .45rem !important;
    padding: .5rem 0 !important;
    border-bottom: 1px solid rgba(64,134,187,.12);
    color: #6c89a0 !important;
  }
  .sy-start-play .demo-hero-aside > span:last-of-type {
    border-bottom: 0;
  }
  .sy-start-play .demo-hero-aside strong {
    padding-left: 0 !important;
    color: var(--iqm-hero-ink) !important;
    font-size: 1.35rem !important;
  }
  .sy-start-play .demo-hero-aside p {
    margin: .65rem 0 .25rem !important;
    color: var(--iqm-hero-muted) !important;
  }
  .sy-start-play .demo-hero-aside .sy-motion {
    margin-top: .35rem;
  }
}

@media (max-width: 900px) {
  .sy-start-play .demo-hero-aside {
    width: min(100%,420px) !important;
    margin: 0 !important;
    padding: 20px 22px !important;
    border: 1px solid rgba(56,137,197,.18) !important;
    border-top: 4px solid #22aaff !important;
    border-radius: 22px !important;
    background: rgba(255,255,255,.86) !important;
    box-shadow: 0 14px 34px rgba(31,91,137,.10) !important;
    backdrop-filter: blur(12px);
  }
}

/* Header logo: preserve the eye mark's native aspect ratio and pair it with live text. */
.synergy-home-v1 .sy-brand,
.workflow-page .wf-brand,
.support .site-header .brand {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: .62rem !important;
  flex: 0 0 auto !important;
  width: auto !important;
  height: auto !important;
  min-height: 52px !important;
  padding: 0 !important;
  overflow: visible !important;
  background: none !important;
  color: #102a4a !important;
  font-family: ui-rounded, "Trebuchet MS", system-ui, sans-serif !important;
  font-size: 1.42rem !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  letter-spacing: -.035em !important;
  text-indent: 0 !important;
  white-space: nowrap !important;
}
.synergy-home-v1 .sy-brand::before,
.workflow-page .wf-brand::before,
.support .site-header .brand::before {
  content: "" !important;
  display: block !important;
  flex: 0 0 58px !important;
  width: 58px !important;
  height: 46px !important;
  background: url("/assets/branding/iq-mindware-eye.png?v=20260922-integrated-2") center / contain no-repeat !important;
}
.synergy-home-v1 .sy-brand {
  color: #0a82ea !important;
}
.synergy-home-v1 .sy-brand span {
  display: inline !important;
  margin-left: .12em;
  color: #102a4a !important;
}
.workflow-page .wf-brand__mark {
  display: none !important;
}
.workflow-page .wf-brand > span:last-child {
  display: inline !important;
  color: #102a4a !important;
}
.support .site-header .brand > * {
  display: inline !important;
}

@media (max-width: 720px) {
  .synergy-home-v1 .sy-brand,
  .workflow-page .wf-brand,
  .support .site-header .brand {
    min-height: 44px !important;
    font-size: 1.2rem !important;
  }
  .synergy-home-v1 .sy-brand::before,
  .workflow-page .wf-brand::before,
  .support .site-header .brand::before {
    flex-basis: 48px !important;
    width: 48px !important;
    height: 38px !important;
  }
}


/* --------------------------------------------------------------------------
   Surface contrast system
   Dark surfaces own their text palette; light cards nested inside them reset
   back to dark ink. These rules intentionally sit after the shared type system.
   -------------------------------------------------------------------------- */
:root {
  --iqm-dark-ink: #f8fbff;
  --iqm-dark-body: #d8e6f2;
  --iqm-dark-muted: #bdd0df;
  --iqm-dark-line: rgba(255,255,255,.16);
  --iqm-light-card-ink: #0a2550;
  --iqm-light-card-body: #48657f;
}

/* Why IQ dark sections */
.why-iq-v2 .why-section--dark,
.why-iq-v2 .why-final {
  color: var(--iqm-dark-ink) !important;
}
.why-iq-v2 .why-section--dark :is(h2,h3),
.why-iq-v2 .why-final :is(h2,h3) {
  color: var(--iqm-dark-ink) !important;
  -webkit-text-fill-color: currentColor !important;
}
.why-iq-v2 .why-section--dark :is(p,li),
.why-iq-v2 .why-final p {
  color: var(--iqm-dark-body) !important;
}
.why-iq-v2 .why-section--dark .sy-kicker,
.why-iq-v2 .why-final .sy-kicker {
  color: #7edcff !important;
}
.why-iq-v2 .why-section--dark a:not(.sy-btn) {
  color: #9de6ff !important;
}
.why-iq-v2 .why-section--dark .why-cite {
  color: #ccff66 !important;
}

/* Light cards and diagrams must never inherit pale type from dark contexts. */
.why-iq-v2 :is(
  .why-card,
  .why-g-copy,
  .why-boundary-card,
  .why-product-card--measure,
  .why-mutualism-model,
  .why-mutualism-ability
) {
  color: var(--iqm-light-card-ink) !important;
}
.why-iq-v2 :is(
  .why-card,
  .why-g-copy,
  .why-boundary-card,
  .why-product-card--measure,
  .why-mutualism-model,
  .why-mutualism-ability
) :is(h2,h3,h4,strong) {
  color: var(--iqm-light-card-ink) !important;
  -webkit-text-fill-color: currentColor !important;
}
.why-iq-v2 :is(
  .why-card,
  .why-g-copy,
  .why-boundary-card,
  .why-product-card--measure
) p {
  color: var(--iqm-light-card-body) !important;
}
.why-iq-v2 .why-mutualism-ability,
.why-iq-v2 .why-mutualism-ability strong {
  color: #10283f !important;
  -webkit-text-fill-color: #10283f !important;
}
.why-iq-v2 .why-mutualism-model-caption {
  color: #526c85 !important;
}
.why-iq-v2 .why-g-centre,
.why-iq-v2 .why-g-centre strong {
  color: #111b38 !important;
  -webkit-text-fill-color: #111b38 !important;
}

/* How It Works navy sections */
.how-page .how-section--navy,
.how-page .how-cta {
  color: var(--iqm-dark-ink) !important;
}
.how-page .how-section--navy :is(h2,h3),
.how-page .how-cta h2 {
  color: var(--iqm-dark-ink) !important;
  -webkit-text-fill-color: currentColor !important;
}
.how-page .how-section--navy :is(p,li,span) {
  color: var(--iqm-dark-body);
}
.how-page .how-section--navy .sy-kicker {
  color: #7edcff !important;
}
.how-page .how-section--navy .how-stack li {
  border-color: var(--iqm-dark-line) !important;
  background: rgba(255,255,255,.07) !important;
}
.how-page .how-section--navy .how-stack b {
  color: #ccff66 !important;
}
.how-page .how-section--navy .how-stack span {
  color: var(--iqm-dark-body) !important;
}

/* Science navy sections */
.synergy-science-page .science-section--navy {
  color: var(--iqm-dark-ink) !important;
}
.synergy-science-page .science-section--navy :is(
  .science-section-head h2,
  .principle-copy h2,
  h3
) {
  color: var(--iqm-dark-ink) !important;
  -webkit-text-fill-color: currentColor !important;
}
.synergy-science-page .science-section--navy :is(
  .science-section-head p,
  .principle-copy > p,
  li
) {
  color: var(--iqm-dark-body) !important;
}
.synergy-science-page .science-section--navy .sy-kicker {
  color: #7edcff !important;
}
.synergy-science-page .science-section--navy .evidence-box {
  color: var(--iqm-dark-body) !important;
  background: rgba(255,255,255,.07) !important;
  border-left-color: #ccff66 !important;
}
.synergy-science-page .science-section--navy .evidence-box strong {
  color: #f8fbff !important;
}

/* Organisations dark sections */
.synergy-organisations-page .swi-section--dark {
  color: var(--iqm-dark-ink) !important;
}
.synergy-organisations-page .swi-section--dark :is(
  .swi-section-head h2,
  .swi-split h2,
  h3
) {
  color: var(--iqm-dark-ink) !important;
  -webkit-text-fill-color: currentColor !important;
}
.synergy-organisations-page .swi-section--dark :is(
  .swi-section-head > p:last-child,
  .swi-split-copy > p,
  .swi-method-card p,
  li
) {
  color: var(--iqm-dark-body) !important;
}
.synergy-organisations-page .swi-section--dark .sy-kicker {
  color: #7edcff !important;
}
.synergy-organisations-page .swi-section--dark .swi-method-card {
  border-color: var(--iqm-dark-line) !important;
  background: rgba(255,255,255,.07) !important;
}
.synergy-organisations-page .swi-section--dark .swi-method-card h3 {
  color: #f8fbff !important;
}
.synergy-organisations-page .swi-section--dark .swi-method-card span {
  color: #17302b !important;
  background: #ccff66 !important;
}

/* Vision dark sections */
.vision-dark {
  color: var(--iqm-dark-ink) !important;
}
.vision-dark :is(h2,h3,strong) {
  color: var(--iqm-dark-ink) !important;
  -webkit-text-fill-color: currentColor !important;
}
.vision-dark :is(p,.vision-lede) {
  color: var(--iqm-dark-body) !important;
}
.vision-dark .sy-kicker {
  color: #7edcff !important;
}
.vision-dark .vision-four article {
  color: var(--iqm-dark-ink) !important;
  border-color: var(--iqm-dark-line) !important;
  background: rgba(255,255,255,.07) !important;
}
.vision-dark .vision-four article :is(h3,strong) {
  color: #f8fbff !important;
}
.vision-dark .vision-four article p {
  color: var(--iqm-dark-body) !important;
}

/* Pricing dark cards */
.synergy-plans-page :is(
  .plans-bundle-card,
  .plans-value-grid article:last-child
) {
  color: var(--iqm-dark-ink) !important;
}
.synergy-plans-page :is(
  .plans-bundle-card,
  .plans-value-grid article:last-child
) :is(h2,h3,strong) {
  color: var(--iqm-dark-ink) !important;
  -webkit-text-fill-color: currentColor !important;
}
.synergy-plans-page :is(
  .plans-bundle-card,
  .plans-value-grid article:last-child
) p {
  color: var(--iqm-dark-body) !important;
}
.synergy-plans-page .plans-bundle-card .plans-bundle-eyebrow {
  color: #b9d3e7 !important;
}
.synergy-plans-page .plans-bundle-card .plans-bundle-eyebrow span:last-child {
  color: #17302b !important;
}

/* Links/focus on dark surfaces: visible at rest and on interaction. */
:is(
  .why-iq-v2 .why-section--dark,
  .how-page .how-section--navy,
  .synergy-science-page .science-section--navy,
  .synergy-organisations-page .swi-section--dark,
  .vision-dark
) a:focus-visible {
  outline: 3px solid #ccff66 !important;
  outline-offset: 3px;
}


/* Title accent blue (#22AAFF): align highlighted heading phrases with the light cyan-blue
   used in the neural artwork and IQ Mindware visual system. */
.synergy-home-v1 :is(.sy-title-accent,.sy-title-highlight),
.why-iq-v2 .why-section-heading h2 span,
.synergy-plans-page .plans-section-head h2 span,
.synergy-science-page .science-section-head h2 span,
.synergy-organisations-page .swi-section-head h2 span,
.synergy-learn-page .learn-section-head h2 span,
.vision-section h2 span {
  color: #22aaff !important;
  -webkit-text-fill-color: #22aaff !important;
}


/* Small-screen header chrome remains compact even when the user enlarges page text.
   Content typography still scales; brand/menu controls keep the header from overflowing. */
@media (max-width: 620px) {
  .synergy-home-v1 .sy-brand,
  .workflow-page .wf-brand,
  .support .site-header .brand {
    min-height: 42px !important;
    gap: 7px !important;
    font-size: 20px !important;
    line-height: 1 !important;
    letter-spacing: -.03em !important;
  }
  .synergy-home-v1 .sy-brand::before,
  .workflow-page .wf-brand::before,
  .support .site-header .brand::before {
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 34px !important;
  }
  .synergy-home-v1 .sy-menu-button {
    min-height: 42px !important;
    padding: 8px 11px !important;
    font-size: 14px !important;
    line-height: 1 !important;
  }
}


/* Start Here: preserve the shared desktop hero envelope on laptop-height screens.
   The third prediction prompt remains available below 920px via the page body rather
   than forcing the fixed hero to clip. */
@media (min-width:901px) and (max-height:920px){
  body.synergy-start-v1.sy-start-play .demo-hero{
    padding-block:1.25rem!important;
  }
  body.synergy-start-v1.sy-start-play .demo-hero-inner{
    gap:1.5rem!important;
  }
  body.synergy-start-v1.sy-start-play .demo-hero-lede{
    margin-top:.7rem!important;
    line-height:1.42!important;
  }
  body.synergy-start-v1.sy-start-play .demo-hero-lede:last-of-type{
    display:none!important;
  }
}