/* Fulmor v68 — place the complete architecture descriptions around the
 * exploded product, remove duplicate image badges, and keep the same content
 * readable below the image on tablet and mobile. */

.home-page.home-v20 .architecture-image-markers,
.home-page.home-v20 .architecture-callouts.architecture-details {
  display: none !important;
}

.home-page.home-v20 .architecture-stage {
  min-height: clamp(780px, 62vw, 900px);
}

.home-page.home-v20 .architecture-stage::before {
  background: transparent !important;
}

.home-page.home-v20 .architecture-visual-callouts {
  z-index: 4;
}

.home-page.home-v20 .architecture-visual-callout {
  align-content: start;
  width: clamp(290px, 24vw, 350px);
  min-height: 0;
  padding: 18px 18px 20px;
  border-top: 1px solid var(--v20-accent);
  background: rgb(255 255 255 / 96%);
  box-shadow: 0 14px 34px rgb(32 39 35 / 6%);
}

.home-page.home-v20 .architecture-visual-callout small {
  margin: 0 0 13px;
  color: var(--v20-accent-text);
  font-family: var(--fulmor-font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1;
}

.home-page.home-v20 .architecture-visual-callout strong {
  margin: 0;
  color: var(--v20-ink);
  font-size: 16px;
  font-weight: 650;
  letter-spacing: 0.045em;
  line-height: 1.3;
  text-transform: uppercase;
}

.home-page.home-v20 .architecture-visual-callout em {
  margin-top: 9px;
  color: #30353a;
  font-family: inherit;
  font-size: 13.5px;
  font-style: normal;
  font-weight: 550;
  letter-spacing: 0;
  line-height: 1.48;
  text-transform: none;
}

.home-page.home-v20 .architecture-visual-callout p {
  margin: 10px 0 0;
  color: var(--v20-copy);
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: -0.003em;
  line-height: 1.58;
}

/* The supplied reference swaps the 01 and 03 callout positions. */
.home-page.home-v20 .architecture-visual-callout-a {
  top: 43%;
  right: 1%;
  bottom: auto;
  left: auto;
}

.home-page.home-v20 .architecture-visual-callout-b {
  top: auto;
  right: auto;
  bottom: 7%;
  left: 35%;
}

.home-page.home-v20 .architecture-visual-callout-c {
  top: 12%;
  right: auto;
  bottom: auto;
  left: 1%;
}

@media (min-width: 961px) and (max-width: 1100px) {
  .home-page.home-v20 .architecture-stage {
    min-height: 820px;
  }

  .home-page.home-v20 .architecture-visual-callout {
    width: 260px;
    padding: 15px 15px 17px;
  }

  .home-page.home-v20 .architecture-visual-callout strong {
    font-size: 14px;
  }

  .home-page.home-v20 .architecture-visual-callout em {
    font-size: 12.5px;
  }

  .home-page.home-v20 .architecture-visual-callout p {
    font-size: 11.5px;
    line-height: 1.55;
  }

  .home-page.home-v20 .architecture-visual-callout-a {
    top: 39%;
  }

  .home-page.home-v20 .architecture-visual-callout-b {
    bottom: 5%;
  }

  .home-page.home-v20 .architecture-visual-callout-c {
    top: 8%;
  }
}

@media (max-width: 960px) {
  .home-page.home-v20 .architecture-stage {
    min-height: 0;
  }

  .home-page.home-v20 .architecture-visual-callouts {
    position: static;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    border-top: 1px solid var(--architecture-line);
    background: var(--architecture-paper);
  }

  .home-page.home-v20 .architecture-visual-callout,
  .home-page.home-v20 .architecture-visual-callout-a,
  .home-page.home-v20 .architecture-visual-callout-b,
  .home-page.home-v20 .architecture-visual-callout-c {
    position: static;
    inset: auto !important;
    width: auto;
    min-height: 0;
    padding: 22px clamp(20px, 4vw, 32px) 24px;
    border: 0;
    border-bottom: 1px solid var(--architecture-line);
    background: var(--architecture-paper);
    box-shadow: none;
  }

  .home-page.home-v20 .architecture-visual-callout:last-child {
    border-bottom: 0;
  }

  .home-page.home-v20 .architecture-visual-callout strong {
    font-size: 15px;
  }

  .home-page.home-v20 .architecture-visual-callout em {
    font-size: 13.5px;
  }

  .home-page.home-v20 .architecture-visual-callout p {
    max-width: 72ch;
    font-size: 13px;
  }
}

@media (max-width: 680px) {
  .home-page.home-v20 .architecture-visual-callouts {
    display: grid;
  }

  .home-page.home-v20 .architecture-visual-callout,
  .home-page.home-v20 .architecture-visual-callout-a,
  .home-page.home-v20 .architecture-visual-callout-b,
  .home-page.home-v20 .architecture-visual-callout-c {
    padding: 19px 16px 21px;
  }

  .home-page.home-v20 .architecture-visual-callout p {
    font-size: 12.5px;
    line-height: 1.58;
  }
}

/* v75 — keep 01 in its original right-side position and move only the 03
 * core-module callout into the marked upper whitespace. Preserve the stacked
 * layout below 961px. */
@media (min-width: 1101px) {
  .home-page.home-v20 .architecture-visual-callout-c {
    top: clamp(23px, calc(24.7vw - 248.5px), 107px);
    right: auto;
    bottom: auto;
    left: calc(1% + clamp(290px, 24vw, 350px) + clamp(16px, 1.8vw, 28px));
  }
}

@media (min-width: 961px) and (max-width: 1100px) {
  .home-page.home-v20 .architecture-visual-callout-c {
    top: 10%;
    right: auto;
    bottom: auto;
    left: calc(1% + 278px);
  }
}