.our-collection {
  background-color: rgba(223, 231, 255, 1); /* Set the background color */
  background-image: url(assets/images/pattern-mask-group.png); /* Set the background image */
  background-blend-mode: multiply; /* Use blending to combine image and color */
  background-size: cover; /* Ensure the image covers the section */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Prevent the image from repeating */
  will-change: background-image;
}

.recovery {
  background-color: rgba(255, 225, 230, 1);
  background-image: url(assets/images/pattern-mask-group.png); /* Set the background image */
  background-blend-mode: multiply; /* Use blending to combine image and color */
  background-size: cover; /* Ensure the image covers the section */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Prevent the image from repeating */
  will-change: background-image;
}

/* Mida Recovery hero: full-bleed photo + navy gradient (left), white copy */
/* Height rhythm matches other product heroes (midax / midaforms / omni fold + 52vw/420 visual) */
.hero-section.recovery-hero-section {
  position: relative;
  overflow: hidden;
  background: #071a3d;
  background-image: none;
  background-blend-mode: normal;
}

.hero-section.recovery-hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(assets/images/pages/recovery_hero.png) center / cover no-repeat;
  z-index: 0;
}

.hero-section.recovery-hero-section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(7, 26, 61, 0.97) 0%,
    rgba(7, 26, 61, 0.9) 22%,
    rgba(7, 26, 61, 0.55) 42%,
    rgba(7, 26, 61, 0.18) 58%,
    transparent 74%
  );
}

.hero-section.recovery-hero-section .inner-hero-section {
  position: relative;
  z-index: 2;
}

.recovery-hero-fold.our-collection-hero {
  max-width: 1240px;
  margin: 0 auto;
  padding-top: clamp(28px, 4vw, 48px);
  padding-bottom: clamp(48px, 7vw, 88px);
  padding-left: clamp(20px, 4vw, 48px);
  padding-right: clamp(20px, 4vw, 48px);
  min-height: min(52vw, 420px);
  display: flex;
  align-items: center;
}

.recovery-hero-copy {
  max-width: min(540px, 100%);
  text-align: left;
}

.recovery-hero-title {
  font-family: var(--bold-font-h1), var(--font-bold-aeonik), sans-serif;
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin: 0 0 clamp(16px, 2vw, 24px);
}

.recovery-hero-lead {
  font-family: var(--font-regular-satoshi), var(--regular-font-p-aeonik), sans-serif;
  font-size: clamp(1rem, 1.15vw, 1.125rem);
  font-weight: 400;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.96);
  margin: 0 0 clamp(28px, 4vw, 40px);
}

.recovery-hero-copy .get-started-header {
  display: inline-block;
  margin-top: 0;
}

@media screen and (max-width: 900px) {
  .recovery-hero-fold.our-collection-hero {
    min-height: auto;
    align-items: flex-start;
  }
}

@media screen and (max-width: 640px) {
  .hero-section.recovery-hero-section::before {
    background-position: 65% center;
  }

  .hero-section.recovery-hero-section::after {
    background: linear-gradient(
      180deg,
      rgba(7, 26, 61, 0.94) 0%,
      rgba(7, 26, 61, 0.75) 45%,
      rgba(7, 26, 61, 0.4) 100%
    );
  }
}

/* Mida Omni product hero: pale lavender-blue + pattern */
.hero-section.mida-omni.midaomni-hero-section {
  background-color: #eef0fc;
  background-image: url(assets/images/pattern-mask-group.png);
  background-blend-mode: multiply;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  will-change: background-image;
  position: relative;
  overflow-x: hidden;
}

.midaomni-hero-fold.our-collection-hero {
  padding-top: clamp(28px, 4vw, 48px);
  padding-bottom: clamp(48px, 7vw, 88px);
}

.midaomni-hero-grid {
  max-width: 1240px;
  margin: 0 auto;
  padding-left: clamp(20px, 4vw, 48px);
  padding-right: clamp(20px, 4vw, 48px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 1.12fr);
  gap: clamp(28px, 5vw, 56px);
  align-items: center;
}

.midaomni-hero-copy {
  text-align: left;
}

.midaomni-product-logo {
  display: block;
  max-width: min(160px, 88vw);
  width: auto;
  height: auto;
  margin-bottom: clamp(16px, 2vw, 24px);
}

.midaomni-hero-title {
  font-family: var(--bold-font-h1), var(--font-bold-aeonik), sans-serif;
  font-size: clamp(2.25rem, 4.5vw, 3.25rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #000000;
  margin: 0 0 16px;
}

.midaomni-hero-lead {
  font-family: var(--font-regular-satoshi), var(--regular-font-p-aeonik), sans-serif;
  font-size: clamp(1rem, 1.15vw, 1.125rem);
  font-weight: 400;
  line-height: 1.55;
  color: #5f6060;
  max-width: 480px;
  margin: 0 0 clamp(24px, 3vw, 32px);
}

.midaomni-hero-copy .get-started-header {
  display: inline-block;
  margin-top: 0;
}

.midaomni-hero-visual {
  position: relative;
  min-height: min(52vw, 420px);
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.midaomni-hero-pink {
  position: absolute;
  right: 10%;
  top: 5%;
  width: min(40%, 200px);
  height: min(42%, 200px);
  border-radius: 14px;
  background: linear-gradient(180deg, #f472b6 0%, #ec4899 50%, #db2777 100%);
  z-index: 0;
  box-shadow: 0 18px 36px rgba(219, 39, 119, 0.22);
}

.midaomni-hero-blue {
  position: absolute;
  right: 2%;
  top: 22%;
  bottom: 6%;
  width: min(46%, 240px);
  border-radius: 14px;
  background: linear-gradient(180deg, #4f8ff7 0%, #2563eb 55%, #1d4ed8 100%);
  z-index: 0;
  box-shadow: 0 20px 40px rgba(37, 99, 235, 0.25);
}

.midaomni-hero-visual-frame {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
}

.midaomni-hero-visual-frame img {
  max-width: 100%;
  width: min(580px, 100%);
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  filter: drop-shadow(0 20px 50px rgba(18, 43, 67, 0.14));
}

@media screen and (max-width: 900px) {
  .midaomni-hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .midaomni-hero-copy {
    text-align: center;
    max-width: 560px;
    margin: 0 auto;
  }

  .midaomni-product-logo {
    margin-left: auto;
    margin-right: auto;
  }

  .midaomni-hero-lead {
    margin-left: auto;
    margin-right: auto;
  }

  .midaomni-hero-visual {
    justify-content: center;
    min-height: auto;
    margin-top: 12px;
  }

  .midaomni-hero-pink {
    right: 6%;
    top: 2%;
    width: min(44%, 150px);
    height: min(32%, 120px);
  }

  .midaomni-hero-blue {
    right: 4%;
    top: 18%;
    bottom: 4%;
    width: min(52%, 170px);
  }

  .midaomni-hero-visual-frame {
    justify-content: center;
  }

  .midaomni-hero-visual-frame img {
    width: min(100%, 480px);
  }
}

/* MidaX product hero: pale pink + pattern (matches mock) */
.hero-section.midax.midax-hero-section {
  background-color: #fdf2ff;
  background-image: url(assets/images/pattern-mask-group.png);
  background-blend-mode: multiply;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  will-change: background-image;
  position: relative;
  overflow-x: hidden;
}

.midax-hero-fold.our-collection-hero {
  padding-top: clamp(28px, 4vw, 48px);
  padding-bottom: clamp(48px, 7vw, 88px);
}

.midax-hero-grid {
  max-width: 1240px;
  margin: 0 auto;
  padding-left: clamp(20px, 4vw, 48px);
  padding-right: clamp(20px, 4vw, 48px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 1.12fr);
  gap: clamp(28px, 5vw, 56px);
  align-items: center;
}

.midax-hero-copy {
  text-align: left;
}

.midax-product-logo {
  display: block;
  max-width: min(100px, 88vw);
  width: auto;
  height: auto;
  margin-bottom: clamp(16px, 2vw, 24px);
}

.midax-hero-title {
  font-family: var(--bold-font-h1), var(--font-bold-aeonik), sans-serif;
  font-size: clamp(2.25rem, 4.5vw, 3.25rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #000000;
  margin: 0 0 16px;
}

.midax-hero-lead {
  font-family: var(--font-regular-satoshi), var(--regular-font-p-aeonik), sans-serif;
  font-size: clamp(1rem, 1.15vw, 1.125rem);
  font-weight: 400;
  line-height: 1.55;
  color: #5f6060;
  max-width: 480px;
  margin: 0 0 clamp(24px, 3vw, 32px);
}

.midax-hero-copy .get-started-header {
  display: inline-block;
  margin-top: 0;
}

.midax-hero-visual {
  position: relative;
  min-height: min(52vw, 420px);
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.midax-hero-blue {
  position: absolute;
  right: 4%;
  top: 8%;
  bottom: 8%;
  width: min(42%, 220px);
  border-radius: 14px;
  background: linear-gradient(180deg, #4f8ff7 0%, #2563eb 55%, #1d4ed8 100%);
  z-index: 0;
  box-shadow: 0 20px 40px rgba(37, 99, 235, 0.25);
}

.midax-hero-visual-frame {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
}

.midax-hero-visual-frame img {
  max-width: 100%;
  width: min(580px, 100%);
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  filter: drop-shadow(0 20px 50px rgba(18, 43, 67, 0.14));
}

@media screen and (max-width: 900px) {
  .midax-hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .midax-hero-copy {
    text-align: center;
    max-width: 560px;
    margin: 0 auto;
  }

  .midax-product-logo {
    margin-left: auto;
    margin-right: auto;
  }

  .midax-hero-lead {
    margin-left: auto;
    margin-right: auto;
  }

  .midax-hero-visual {
    justify-content: center;
    min-height: auto;
    margin-top: 12px;
  }

  .midax-hero-blue {
    right: 50%;
    transform: translateX(38%);
    width: min(48%, 180px);
  }

  .midax-hero-visual-frame {
    justify-content: center;
  }

  .midax-hero-visual-frame img {
    width: min(100%, 480px);
  }
}

/* —— MidaForms product hero —— */
.hero-section.midaforms-hero-section {
  background-color: #e8f4fc;
  background-image: url(assets/images/pattern-mask-group.png);
  background-blend-mode: multiply;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  will-change: background-image;
  position: relative;
  overflow-x: hidden;
}

.midaforms-hero-fold.our-collection-hero {
  padding-top: clamp(28px, 4vw, 48px);
  padding-bottom: clamp(48px, 7vw, 88px);
}

.midaforms-hero-grid {
  max-width: 1240px;
  margin: 0 auto;
  padding-left: clamp(20px, 4vw, 48px);
  padding-right: clamp(20px, 4vw, 48px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 1.12fr);
  gap: clamp(28px, 5vw, 56px);
  align-items: center;
}

.midaforms-hero-copy {
  text-align: left;
}

.midaforms-product-logo {
  display: block;
  max-width: min(160px, 88vw);
  width: auto;
  height: auto;
  margin-bottom: clamp(16px, 2vw, 24px);
}

.midaforms-hero-title {
  font-family: var(--bold-font-h1), var(--font-bold-aeonik), sans-serif;
  font-size: clamp(2.25rem, 4.5vw, 3.25rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #000000;
  margin: 0 0 16px;
}

.midaforms-hero-lead {
  font-family: var(--font-regular-satoshi), var(--regular-font-p-aeonik), sans-serif;
  font-size: clamp(1rem, 1.15vw, 1.125rem);
  font-weight: 400;
  line-height: 1.55;
  color: #5f6060;
  max-width: 480px;
  margin: 0 0 clamp(24px, 3vw, 32px);
}

.midaforms-hero-copy .get-started-header {
  display: inline-block;
  margin-top: 0;
}

.midaforms-hero-visual {
  position: relative;
  min-height: min(52vw, 420px);
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.midaforms-hero-pink {
  position: absolute;
  right: 10%;
  top: 5%;
  width: min(40%, 200px);
  height: min(42%, 200px);
  border-radius: 14px;
  background: linear-gradient(180deg, #f472b6 0%, #ec4899 50%, #db2777 100%);
  z-index: 0;
  box-shadow: 0 18px 36px rgba(219, 39, 119, 0.22);
}

.midaforms-hero-blue {
  position: absolute;
  right: 2%;
  top: 22%;
  bottom: 6%;
  width: min(46%, 240px);
  border-radius: 14px;
  background: linear-gradient(180deg, #4f8ff7 0%, #2563eb 55%, #1d4ed8 100%);
  z-index: 0;
  box-shadow: 0 20px 40px rgba(37, 99, 235, 0.25);
}

.midaforms-hero-visual-frame {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
}

.midaforms-hero-visual-frame img {
  max-width: 100%;
  width: min(580px, 100%);
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  filter: drop-shadow(0 20px 50px rgba(18, 43, 67, 0.14));
}

@media screen and (max-width: 900px) {
  .midaforms-hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .midaforms-hero-copy {
    text-align: center;
    max-width: 560px;
    margin: 0 auto;
  }

  .midaforms-product-logo {
    margin-left: auto;
    margin-right: auto;
  }

  .midaforms-hero-lead {
    margin-left: auto;
    margin-right: auto;
  }

  .midaforms-hero-visual {
    justify-content: center;
    min-height: auto;
    margin-top: 12px;
  }

  .midaforms-hero-pink {
    right: 6%;
    top: 2%;
    width: min(44%, 150px);
    height: min(32%, 120px);
  }

  .midaforms-hero-blue {
    right: 4%;
    top: 18%;
    bottom: 4%;
    width: min(52%, 170px);
  }

  .midaforms-hero-visual-frame {
    justify-content: center;
  }

  .midaforms-hero-visual-frame img {
    width: min(100%, 480px);
  }
}

.debt-buying {
  background-color: rgba(254, 249, 244, 1);
  background-image: url(assets/images/pattern-mask-group.png); /* Set the background image */
  background-blend-mode: multiply; /* Use blending to combine image and color */
  background-size: cover; /* Ensure the image covers the section */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Prevent the image from repeating */
  will-change: background-image;
}

.our-collection-hero {
  padding-top: 50px;
  padding-bottom: 70px;
}

.success-page {
  background-color: rgba(230, 246, 255, 1);
  background-image: none; /*Set the background image*/
  background-blend-mode: multiply; /* Use blending to combine image and color */
  background-size: cover; /* Ensure the image covers the section */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Prevent the image from repeating */
  will-change: background-image;
}

.get-started {
  /* width: Fixed (136px)px; */
  /* height: Fixed (48px)px; */
  padding: 12.8px 24.8px;
  gap: 10px;
  border-radius: 8px;
  background-color: rgba(237, 15, 132, 1);
  color: white;
  text-decoration: none;
  font-family: var(--font-meduim-aeonik);
  font-size: 15.13px;
  font-weight: 500;
  line-height: 22.4px;
  letter-spacing: -0.20000000298023224px;
  text-align: left;
}

.book-demo {
  /* width: Fixed (136px)px; */
  /* height: Fixed (48px)px; */
  padding: 14px 20px;
  gap: 10px;
  border-radius: 8px;
  background-color: transparent;
  text-decoration: none;
  padding: 12.8px 24.8px;
  border-radius: 8px;
  color: rgba(15, 15, 15, 1);
  border: 1px solid rgba(0, 35, 67, 1);
  opacity: 0px;
  font-family: var(--font-meduim-aeonik);
  font-size: 15.13px;
  font-weight: 500;
  line-height: 22.4px;
  letter-spacing: -0.20000000298023224px;
  text-align: left;
}

/* product-card */

.product-info-section {
  margin: 0 auto;
  width: 100%;
  max-width: 1440px;
  display: flex;
  flex-direction: column;
  align-items: center;

  padding: 80px;
  gap: 88px;
}

/* The Problem It Solves: two-column layout (copy left, image right) */
.product-info-problem {
  width: 100%;
  max-width: 1240px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

.product-info-problem-copy {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 24px);
}

.product-info-problem-title {
  font-family: var(--bold-font-h1);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 700;
  line-height: 1.2;
  color: rgba(15, 15, 15, 1);
  margin: 0;
  text-align: left;
}

.product-info-highlight {
  color: var(--color-secondary);
}

.product-info-problem-lead {
  font-family: var(--font-regular-satoshi), var(--regular-font-p-aeonik), sans-serif;
  font-size: clamp(1rem, 1.1vw, 1.25rem);
  font-weight: 400;
  line-height: 1.55;
  color: rgba(95, 96, 96, 1);
  margin: 0;
  text-align: left;
}

.product-info-problem-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-info-problem-visual img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* MidaX problem illustration: soft frame to match mock */
.product-info-problem--midax .product-info-problem-visual img {
  border-radius: 16px;
}

/* Mida Omni: white band, copy ~42% / visual ~58%; mobile = copy then image */
.product-info-section--omni-problem {
  max-width: none;
  width: 100%;
  background-color: #ffffff;
  padding: clamp(56px, 6vw, 96px) clamp(20px, 4vw, 48px);
  gap: 0;
}

.product-info-problem--omni {
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.18fr);
  gap: clamp(36px, 5vw, 72px);
}

.product-info-problem--omni .product-info-problem-visual img {
  border-radius: 16px;
  /* box-shadow: 0 16px 48px rgba(18, 43, 67, 0.1); */
}

/* Mida Recovery: white band, two-column problem + composite visual */
.product-info-section--recovery-problem {
  max-width: none;
  width: 100%;
  background-color: #ffffff;
  padding: clamp(56px, 6vw, 96px) clamp(20px, 4vw, 48px);
  gap: 0;
}

.product-info-problem--recovery {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 64px);
}

.product-info-problem--recovery .product-info-problem-visual img {
  border-radius: 16px;
  box-shadow: 0 16px 48px rgba(18, 43, 67, 0.1);
}

/* MidaForms: full-bleed light band; image left, copy right */
.product-info-section--forms-problem {
  max-width: none;
  width: 100%;
  background-color: #f0f2f4;
  padding: clamp(56px, 6vw, 88px) clamp(20px, 4vw, 48px);
  gap: 0;
}

.product-info-problem--forms .product-info-problem-visual img {
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(18, 43, 67, 0.08);
}

/* MidaForms: Key Capabilities — four equal columns, icon circles */
.product-info-section--forms-capabilities {
  max-width: none;
  width: 100%;
  background: #ffffff;
  padding: clamp(48px, 6vw, 88px) clamp(20px, 4vw, 48px);
  gap: 0;
}

.key-capabilities--forms-page {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
}

.key-capabilities-grid--four {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(10px, 1.25vw, 18px);
}

.key-capabilities-grid--four .key-capability-card {
  grid-column: auto;
  min-width: 0;
}

/* Tighter cards so four columns fit on laptop / tablet widths */
.key-capabilities--forms-page .key-capability-card {
  padding: clamp(16px, 2vw, 24px);
  gap: clamp(8px, 1.2vw, 12px);
}

.key-capabilities--forms-page .key-capability-heading {
  font-size: clamp(0.9rem, 0.95vw, 1.05rem);
  line-height: 1.25;
}

.key-capabilities--forms-page .key-capability-body {
  font-size: clamp(0.78rem, 0.85vw, 0.9rem);
  line-height: 1.45;
}

.key-capabilities--forms-page .key-capability-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(252, 232, 242, 1);
}

.key-capabilities--forms-page .key-capability-icon svg,
.key-capabilities--forms-page .key-capability-icon img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

/* Stay four-across down to small phones; stack only on very narrow viewports */
@media (max-width: 480px) {
  .key-capabilities-grid--four {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px;
  }
}

@media (max-width: 360px) {
  .key-capabilities-grid--four {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .product-info-problem {
    grid-template-columns: 1fr;
  }

  .product-info-problem-visual {
    order: -1;
  }

  /* Omni: stack with copy first, then image */
  .product-info-problem--omni .product-info-problem-copy {
    order: -1;
  }

  .product-info-problem--omni .product-info-problem-visual {
    order: 0;
  }

  /* Recovery: stack with copy first, then image */
  .product-info-problem--recovery .product-info-problem-copy {
    order: -1;
  }

  .product-info-problem--recovery .product-info-problem-visual {
    order: 0;
  }
}

/* Key Capabilities: 3+2 grid, light section bg, white cards */
.key-capabilities {
  width: 100%;
  max-width: 1240px;
  /* padding: clamp(40px, 5vw, 64px) clamp(24px, 3vw, 40px); */
  border-radius: 16px;
}

.key-capabilities-title {
  font-family: var(--bold-font-h1);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 700;
  line-height: 1.2;
  color: rgba(15, 15, 15, 1);
  margin: 0 0 clamp(32px, 4vw, 48px);
  text-align: center;
}

.key-capabilities-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(20px, 2.5vw, 28px);
}

.key-capability-card {
  background: #fff;
  border: 1px solid rgba(232, 233, 233, 1);
  border-radius: 14px;
  padding: clamp(24px, 3vw, 32px);
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.5vw, 16px);
}

/* 3+2 layout only on default MidaCollect grid (6 cols), not --three / --four */
.key-capabilities-grid:not(.key-capabilities-grid--four):not(
    .key-capabilities-grid--three
  )
  > .key-capability-card:nth-child(1),
.key-capabilities-grid:not(.key-capabilities-grid--four):not(
    .key-capabilities-grid--three
  )
  > .key-capability-card:nth-child(2),
.key-capabilities-grid:not(.key-capabilities-grid--four):not(
    .key-capabilities-grid--three
  )
  > .key-capability-card:nth-child(3) {
  grid-column: span 2;
}

.key-capabilities-grid:not(.key-capabilities-grid--four):not(
    .key-capabilities-grid--three
  )
  > .key-capability-card:nth-child(4),
.key-capabilities-grid:not(.key-capabilities-grid--four):not(
    .key-capabilities-grid--three
  )
  > .key-capability-card:nth-child(5) {
  grid-column: span 3;
}

.key-capability-icon {
  width: 48px;
  height: 48px;
  color: var(--color-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.key-capability-icon svg,
.key-capability-icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.key-capability-heading {
  font-family: var(--font-meduim-aeonik), var(--bold-font-h1), sans-serif;
  font-size: clamp(1.05rem, 1.15vw, 1.25rem);
  font-weight: 600;
  line-height: 1.3;
  color: rgba(15, 15, 15, 1);
  margin: 0;
}

.key-capability-body {
  font-family: var(--font-regular-satoshi), var(--regular-font-p-aeonik), sans-serif;
  font-size: clamp(0.9rem, 1vw, 1rem);
  font-weight: 400;
  line-height: 1.5;
  color: rgba(95, 96, 96, 1);
  margin: 0;
}

@media (max-width: 900px) {
  .key-capabilities-grid:not(.key-capabilities-grid--four):not(
      .key-capabilities-grid--three
    ) {
    grid-template-columns: 1fr;
  }

  .key-capabilities-grid:not(.key-capabilities-grid--four):not(
      .key-capabilities-grid--three
    )
    > .key-capability-card:nth-child(1),
  .key-capabilities-grid:not(.key-capabilities-grid--four):not(
      .key-capabilities-grid--three
    )
    > .key-capability-card:nth-child(2),
  .key-capabilities-grid:not(.key-capabilities-grid--four):not(
      .key-capabilities-grid--three
    )
    > .key-capability-card:nth-child(3),
  .key-capabilities-grid:not(.key-capabilities-grid--four):not(
      .key-capabilities-grid--three
    )
    > .key-capability-card:nth-child(4),
  .key-capabilities-grid:not(.key-capabilities-grid--four):not(
      .key-capabilities-grid--three
    )
    > .key-capability-card:nth-child(5) {
    grid-column: span 1;
  }
}

/* MidaX: Key Capabilities — white section, 3 equal columns, pink icon circles */
.key-capabilities--midax {
  background: #ffffff;
  width: 100%;
  max-width: 1240px;
  padding: clamp(40px, 5vw, 72px) 0;
}

.key-capabilities-grid--three {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.5vw, 28px);
}

.key-capabilities-grid--three .key-capability-card {
  grid-column: auto;
}

.key-capabilities--midax .key-capability-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(252, 232, 242, 1);
}

/* Mida Omni: Key Capabilities — light band, 3+2 grid, pink icon circles */
.product-info-section--omni-capabilities {
  max-width: none;
  width: 100%;
  background-color: #f5f6f8;
  padding: clamp(56px, 6vw, 88px) clamp(20px, 4vw, 48px);
  gap: 0;
}

.key-capabilities--omni {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
}

.key-capabilities--omni .key-capability-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(252, 232, 242, 1);
}

.key-capabilities--omni .key-capability-icon img {
  object-fit: contain;
}

/* Mida Recovery: Key Capabilities — light band, 3+2 grid, pink icon circles */
.product-info-section--recovery-capabilities {
  max-width: none;
  width: 100%;
  background-color: #f5f6f8;
  padding: clamp(56px, 6vw, 88px) clamp(20px, 4vw, 48px);
  gap: 0;
}

.key-capabilities--recovery {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
}

.key-capabilities--recovery .key-capability-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(252, 232, 242, 1);
}

.key-capabilities--recovery .key-capability-icon img {
  object-fit: contain;
}

@media (max-width: 900px) {
  .key-capabilities-grid--three {
    grid-template-columns: 1fr;
  }
}

/* Who It's For banner — MidaX + MidaForms + Mida Omni + Mida Recovery (magenta panel, stripes, photo) */
.midax-who-for,
.forms-who-for,
.omni-who-for,
.recovery-who-for {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 48px) 0;
}

.midax-who-for-inner,
.forms-who-for-inner,
.omni-who-for-inner,
.recovery-who-for-inner {
  display: grid;
  grid-template-columns: minmax(260px, 1.12fr) 36px minmax(220px, 1fr);
  align-items: stretch;
  border-radius: 40px;
  overflow: hidden;
  box-shadow: 0 12px 48px rgba(18, 43, 67, 0.1);
  min-height: min(52vw, 380px);
}

.midax-who-for-copy,
.forms-who-for-copy {
  background: #a5005b;
  padding: clamp(32px, 5vw, 56px) clamp(28px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 22px);
  justify-content: center;
}

.omni-who-for-copy {
  background: #A80B5E;
  padding: clamp(32px, 5vw, 56px) clamp(28px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 22px);
  justify-content: center;
}

.recovery-who-for-copy {
  background: #A80B5E;
  padding: clamp(32px, 5vw, 56px) clamp(28px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 22px);
  justify-content: center;
}

.midax-who-for-title,
.forms-who-for-title,
.omni-who-for-title,
.recovery-who-for-title {
  font-family: var(--bold-font-h1), var(--font-bold-aeonik), sans-serif;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 700;
  line-height: 1.15;
  color: #ffffff;
  margin: 0;
}

.midax-who-for-lead,
.forms-who-for-lead,
.omni-who-for-lead,
.recovery-who-for-lead {
  font-family: var(--font-regular-satoshi), var(--regular-font-p-aeonik), sans-serif;
  font-size: clamp(0.95rem, 1.05vw, 1.0625rem);
  font-weight: 400;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.95);
  margin: 0;
  max-width: 36em;
}

.midax-who-for-tags,
.forms-who-for-tags,
.recovery-who-for-tags {
  list-style: none;
  margin: clamp(8px, 1vw, 12px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 14px;
}

.omni-who-for-tags {
  list-style: none;
  margin: clamp(8px, 1vw, 12px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px 14px;
}

.midax-who-for-tags li,
.forms-who-for-tags li,
.omni-who-for-tags li,
.recovery-who-for-tags li {
  background: #ffffff;
  color: #0f0f0f;
  font-family: var(--font-regular-satoshi), var(--regular-font-p-aeonik), sans-serif;
  font-size: clamp(0.8125rem, 0.95vw, 0.9375rem);
  font-weight: 500;
  line-height: 1.35;
  padding: 12px 16px;
  border-radius: 9999px;
  text-align: center;
}

.omni-who-for-tags li:nth-child(1) {
  grid-column: 1 / span 2;
}

.omni-who-for-tags li:nth-child(2) {
  grid-column: 3 / span 2;
}

.omni-who-for-tags li:nth-child(3) {
  grid-column: 5 / span 2;
}

.omni-who-for-tags li:nth-child(4) {
  grid-column: 2 / span 2;
}

.omni-who-for-tags li:nth-child(5) {
  grid-column: 4 / span 2;
}

.midax-who-for-divider,
.forms-who-for-divider,
.omni-who-for-divider,
.recovery-who-for-divider {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 0;
  margin: 0 -6px;
  z-index: 2;
  pointer-events: none;
  background-color: #a5005b;
}

.omni-who-for-divider {
  background-color: #A80B5E;
}

.recovery-who-for-divider {
  background-color: #A80B5E;
}

.midax-who-for-stripe,
.forms-who-for-stripe,
.omni-who-for-stripe,
.recovery-who-for-stripe {
  width: 50px;
  flex-shrink: 0;
  align-self: stretch;
  min-height: 100%;
  transform: skewX(-14deg);
  z-index: -1;
}

.midax-who-for-stripe--1,
.forms-who-for-stripe--1,
.omni-who-for-stripe--1,
.recovery-who-for-stripe--1 {
  background: transparent;
}

.midax-who-for-stripe--2,
.forms-who-for-stripe--2,
.omni-who-for-stripe--2,
.recovery-who-for-stripe--2 {
  background: #d9468c;
}

.midax-who-for-stripe--3,
.forms-who-for-stripe--3,
.omni-who-for-stripe--3,
.recovery-who-for-stripe--3 {
  background: #fbcfe8;
}

.midax-who-for-visual,
.forms-who-for-visual,
.omni-who-for-visual,
.recovery-who-for-visual {
  position: relative;
  min-height: 280px;
  background: #1a1a1a;
}

.midax-who-for-visual img,
.forms-who-for-visual img,
.omni-who-for-visual img,
.recovery-who-for-visual img {
  width: 100%;
  height: 100%;
  min-height: 280px;
  object-fit: cover;
  object-position: center;
  display: block;
}

.product-info-section--forms-who,
.product-info-section--omni-who,
.product-info-section--recovery-who {
  max-width: none;
  width: 100%;
  padding: clamp(24px, 4vw, 48px) clamp(20px, 4vw, 48px);
  gap: 0;
}

@media screen and (max-width: 820px) {
  .midax-who-for-inner,
  .forms-who-for-inner,
  .omni-who-for-inner,
  .recovery-who-for-inner {
    grid-template-columns: 1fr;
    border-radius: 24px;
    min-height: 0;
  }

  .midax-who-for-divider,
  .forms-who-for-divider,
  .omni-who-for-divider,
  .recovery-who-for-divider {
    display: none;
  }

  .midax-who-for-visual,
  .forms-who-for-visual,
  .omni-who-for-visual,
  .recovery-who-for-visual {
    min-height: 220px;
    order: -1;
  }

  .midax-who-for-visual img,
  .forms-who-for-visual img,
  .omni-who-for-visual img,
  .recovery-who-for-visual img {
    min-height: 220px;
    max-height: 320px;
  }

  .midax-who-for-tags,
  .forms-who-for-tags,
  .omni-who-for-tags,
  .recovery-who-for-tags {
    grid-template-columns: 1fr;
  }

  .omni-who-for-tags li:nth-child(1),
  .omni-who-for-tags li:nth-child(2),
  .omni-who-for-tags li:nth-child(3),
  .omni-who-for-tags li:nth-child(4),
  .omni-who-for-tags li:nth-child(5) {
    grid-column: auto;
  }
}

/* How It Fits — MidaX (diagram left) + MidaForms (copy left, diagram right) + Mida Omni + Mida Recovery */
.midax-how-fits,
.forms-how-fits,
.omni-how-fits,
.recovery-how-fits {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
}

.midax-how-fits-inner,
.forms-how-fits-inner,
.omni-how-fits-inner,
.recovery-how-fits-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

.midax-how-fits-visual,
.forms-how-fits-visual,
.recovery-how-fits-visual {
  background: #f5f5f5;
  border-radius: 20px;
  padding: clamp(24px, 4vw, 40px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.omni-how-fits-visual {
  background: #ffffff;
  /* border: 1px solid rgba(232, 233, 233, 1); */
  border-radius: 20px;
  padding: clamp(24px, 4vw, 40px);
  display: flex;
  align-items: center;
  justify-content: center;
  /* box-shadow: 0 8px 32px rgba(18, 43, 67, 0.06); */
}

.midax-how-fits-visual img,
.forms-how-fits-visual img,
.omni-how-fits-visual img,
.recovery-how-fits-visual img {
  max-width: 100%;
  width: 100%;
  height: auto;
  display: block;
}

.midax-how-fits-copy,
.forms-how-fits-copy,
.recovery-how-fits-copy {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 22px);
}

.midax-how-fits-title,
.forms-how-fits-title,
.omni-how-fits-title,
.recovery-how-fits-title {
  font-family: var(--bold-font-h1), var(--font-bold-aeonik), sans-serif;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 700;
  line-height: 1.2;
  color: rgba(15, 15, 15, 1);
  margin: 0;
  text-align: left;
}

.midax-how-fits-lead,
.forms-how-fits-lead,
.omni-how-fits-lead,
.recovery-how-fits-lead {
  font-family: var(--font-regular-satoshi), var(--regular-font-p-aeonik), sans-serif;
  font-size: clamp(1rem, 1.1vw, 1.125rem);
  font-weight: 400;
  line-height: 1.55;
  color: rgba(95, 96, 96, 1);
  margin: 0;
  text-align: left;
}

.product-info-section--forms-how,
.product-info-section--omni-how,
.product-info-section--recovery-how {
  max-width: none;
  width: 100%;
  background: #ffffff;
  padding: clamp(48px, 6vw, 88px) clamp(20px, 4vw, 48px);
  gap: 0;
}

@media (max-width: 768px) {
  .midax-how-fits-inner,
  .forms-how-fits-inner,
  .omni-how-fits-inner,
  .recovery-how-fits-inner {
    grid-template-columns: 1fr;
  }

  .midax-how-fits-visual,
  .forms-how-fits-visual,
  .omni-how-fits-visual,
  .recovery-how-fits-visual {
    order: -1;
  }

  .forms-how-fits-copy,
  .omni-how-fits-copy,
  .recovery-how-fits-copy {
    text-align: center;
  }

  .forms-how-fits-title,
  .forms-how-fits-lead,
  .omni-how-fits-title,
  .omni-how-fits-lead,
  .recovery-how-fits-title,
  .recovery-how-fits-lead {
    text-align: center;
  }
}

/* Ethics By Design: two-column layout (copy left, image right) */
.ethics-section {
  width: 100%;
  max-width: 1240px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

.ethics-copy {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 24px);
}

.ethics-title {
  font-family: var(--bold-font-h1);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 700;
  line-height: 1.2;
  color: rgba(15, 15, 15, 1);
  margin: 0;
  text-align: left;
}

.ethics-lead {
  font-family: var(--font-regular-satoshi), var(--regular-font-p-aeonik), sans-serif;
  font-size: clamp(1rem, 1.1vw, 1.25rem);
  font-weight: 400;
  line-height: 1.55;
  color: rgba(95, 96, 96, 1);
  margin: 0;
  text-align: left;
}

.ethics-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.2vw, 14px);
}

.ethics-list li {
  font-family: var(--font-regular-satoshi), var(--regular-font-p-aeonik), sans-serif;
  font-size: clamp(0.95rem, 1vw, 1.1rem);
  font-weight: 400;
  line-height: 1.5;
  color: rgba(55, 52, 53, 1);
  padding-left: 2em;
  position: relative;
}

.ethics-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 1.1em;
  height: 1.1em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ethics-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ethics-visual img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

@media (max-width: 768px) {
  .ethics-section {
    grid-template-columns: 1fr;
  }

  .ethics-visual {
    order: -1;
  }
}

.product-first-section {
  width: 100%;
  max-width: 1225px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.product-first-section h1 {
  font-family: var(--bold-font-h1);
  font-size: 40px;
  font-weight: 700;
  line-height: 48px;
  text-align: center;
  color: rgba(15, 15, 15, 1);
}

.product-first-section p {
  font-family: var(--font-regular-satoshi);
  font-size: 22px;
  max-width: 818px;
  font-weight: 400;
  line-height: 29.7px;
  text-align: center;
  margin: 0 auto;
  color: rgba(95, 96, 96, 1);
}

.product-cards {
  width: 100%;
  max-width: 1275px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 45px;
}

.product-card {
  width: 100%;
  max-width: 395.76px;
  padding: 47.99px 47.99px 157.99px 38.54px;
  display: flex;
  flex-direction: column;
  gap: 20.01px;
  border-radius: 0px 46.74px 46.74px 46.74px;
  border: 1.56px solid rgba(232, 233, 233, 1);
  /* transition: color 0.5s ease-in; */
}

.product-card:hover {
  border: 1px solid rgba(237, 15, 132, 1);
}

.product-card:hover .custom-line {
  border-top: 2px solid rgba(237, 15, 132, 1);
}

.product-card:hover .custom-line-div h3,
.product-card:hover .product-card-title {
  color: rgba(237, 15, 132, 1);
}

.product-card:hover .product-card-details {
  color: rgba(36, 34, 34, 1);
  font-family: var(--regular-font-p);
  font-weight: 500;
}

.custom-line-div {
  display: flex;
  align-items: center;
  gap: 5px;
}

.custom-line-div h3 {
  font-family: var(--font-bold-satoshi);
  font-size: 15px;
  font-weight: 700;
  line-height: 20.25px;
  text-align: left;
  color: rgba(55, 52, 53, 1);
}

.custom-line {
  width: 20%; /* Controls the width of the line */
  border: none; /* Removes default border */
  border-top: 2px solid rgba(55, 52, 53, 1); /* Creates a custom line */
}

.product-card-title {
  font-family: var(--font-meduim-aeonik);
  font-size: 30px;
  font-weight: 500;
  line-height: 40.8px;
  text-align: left;
  color: rgba(0, 35, 67, 1);
  /* width: 100%;
  max-width: 247px; */
}

.product-card-details {
  font-family: var(--font-regular-satoshi);
  font-size: 20px;
  font-weight: 300;
  line-height: 42.1px;
  text-align: left;
  color: rgba(86, 83, 83, 1);
}

.product-last-section {
  width: 100%;
  max-width: 818px;
  display: flex;
  flex-direction: column;
}

.product-request-get-started {
  font-family: var(--font-regular-satoshi);
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
  text-align: center;
}

.product-request-get-started a {
  font-family: var(--font-bold-satoshi);
  font-size: 20px;
  font-weight: 900;
  line-height: 30px;
  text-align: center;
  text-decoration: none;
  color: rgba(0, 0, 0, 1);
}

@media screen and (max-width: 1260px) {
  .product-card {
    max-width: 100%;
    padding: 42px;
    padding-left: 33.77px;
  }
  .product-cards {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
  }
}

@media screen and (max-width: 880px) {
  .product-info-section {
    padding: 40px 30px;
  }
  .product-cards {
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(1, 1fr);
  }

  .product-card {
    max-width: 100%;
  }
}

.mida-faq {
  width: 100%;
  max-width: 851px;
  margin: 0 auto;
  padding: 100px 30px;
  /* padding-bottom: 250px; */
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.faq-heading {
  text-align: center;
}

.faq-heading h2 {
  font-family: var(--bold-font-h1);
  font-size: 32px;
  font-weight: 700;
  line-height: 38.4px;
  text-align: center;
  color: rgba(18, 27, 40, 1);
}

.faq-heading p {
  font-family: var(--font-regular-satoshi);
  font-size: 17px;
  font-weight: 400;
  line-height: 22.95px;
  text-align: center;
  color: rgba(18, 27, 40, 1);
}

.faq-heading p a {
  text-decoration: none;
  color: rgba(195, 8, 107, 1);
}

.accordion-item {
  border-bottom: 0.55px solid rgba(18, 27, 40, 1);
  margin: 1rem 0;
}

.accordion-item-header {
  font-family: var(--font-meduim-aeonik);
  font-size: 18px;
  font-weight: 500;
  line-height: 21.6px;
  text-align: left;
  padding: 0.5rem 3rem 0.5rem 1rem;
  min-height: 3.5rem;
  display: flex;
  position: relative;
  align-items: center;
  color: rgba(18, 27, 40, 1);
  /* line-height: 1.25rem; */
}

/* .accordion-item-header:hover{
  color: rgba(237, 15, 132, 1);
} */

.accordion-item-header::after {
  content: url('assets/svgs/caret-down.svg');
  font-size: 0.5rem;
  position: absolute;
  right: 1rem;
}
.accordion-item-header.active::after {
  content: url('assets/svgs/pink-caret.svg');
}

.accordion-item-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
.accordion-item-body-content {
  padding: 1rem;
  /* line-height: 1.5rem; */
  font-family: var(--font-regular-satoshi);
  font-size: 17px;
  font-weight: 400;
  line-height: 22.95px;
  text-align: left;
  color: rgba(18, 27, 40, 1);

  /* border-top: 1px solid; */
  /* border-image: linear-gradient(to right, transparent, #34495e, transparent) 1; */
}

/* —— MidaCollect product hero (matches home-style pill nav + mockup layout) —— */
/* Same background stack as index.html .hero-section */
.hero-section.our-collection.midacollect-hero-section {
  background-color: #ffe1e6;
  background-image: url(assets/images/pattern-mask-group.png);
  background-blend-mode: multiply;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  will-change: background-image;
  position: relative;
  overflow-x: hidden;
}

.midacollect-hero-fold.our-collection-hero {
  padding-top: clamp(28px, 4vw, 48px);
  padding-bottom: clamp(48px, 7vw, 88px);
}

.midacollect-hero-grid {
  max-width: 1240px;
  margin: 0 auto;
  padding-left: clamp(20px, 4vw, 48px);
  padding-right: clamp(20px, 4vw, 48px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 1.12fr);
  gap: clamp(28px, 5vw, 56px);
  align-items: center;
}

.midacollect-hero-copy {
  text-align: left;
}

.midacollect-product-logo {
  display: block;
  max-width: min(140px, 85vw);
  width: auto;
  height: auto;
  margin-bottom: clamp(16px, 2vw, 24px);
}

.midacollect-hero-title {
  font-family: var(--bold-font-h1), var(--font-bold-aeonik), sans-serif;
  font-size: clamp(2.25rem, 4.5vw, 3.25rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #000000;
  margin: 0 0 16px;
}

.midacollect-hero-lead {
  font-family: var(--font-regular-satoshi), var(--regular-font-p-aeonik), sans-serif;
  font-size: clamp(1rem, 1.15vw, 1.125rem);
  font-weight: 400;
  line-height: 1.55;
  color: #5f6060;
  max-width: 460px;
  margin: 0 0 clamp(24px, 3vw, 32px);
}

/* Hero CTA uses .get-started-header (header-footer.css + ripple in style.css) */
.midacollect-hero-copy .get-started-header {
  display: inline-block;
  margin-top: 0;
}

.midacollect-hero-visual {
  position: relative;
  min-height: min(52vw, 420px);
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.midacollect-hero-blue {
  position: absolute;
  right: 4%;
  top: 8%;
  bottom: 8%;
  width: min(42%, 220px);
  border-radius: 14px;
  background: linear-gradient(180deg, #4f8ff7 0%, #2563eb 55%, #1d4ed8 100%);
  z-index: 0;
  box-shadow: 0 20px 40px rgba(37, 99, 235, 0.25);
}

.midacollect-hero-visual-frame {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
}

.midacollect-hero-visual-frame img {
  max-width: 100%;
  width: min(580px, 100%);
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  filter: drop-shadow(0 20px 50px rgba(18, 43, 67, 0.14));
}

@media screen and (max-width: 900px) {
  .midacollect-hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .midacollect-hero-copy {
    text-align: center;
    max-width: 560px;
    margin: 0 auto;
  }

  .midacollect-product-logo {
    margin-left: auto;
    margin-right: auto;
  }

  .midacollect-hero-lead {
    margin-left: auto;
    margin-right: auto;
  }

  .midacollect-hero-visual {
    justify-content: center;
    min-height: auto;
    margin-top: 12px;
  }

  .midacollect-hero-blue {
    right: 50%;
    transform: translateX(38%);
    width: min(48%, 180px);
  }

  .midacollect-hero-visual-frame {
    justify-content: center;
  }

  .midacollect-hero-visual-frame img {
    width: min(100%, 480px);
  }
}