/* Shared framed components follow the approved homepage, including outside #app. */
body[class*="-framed"] .jvds-growth.jvds-growth-links {
  --growth-ink: #282821;
  --growth-muted: #6e6e65;
  --growth-line: #d9d7cf;
  --growth-card-radius: 0px;
  --scope-accent: #e0f94c;
  --cooperation-gap: 36px;
  background: transparent;
  color: var(--growth-ink);
  overflow: visible;
}

body[class*="-framed"] .jvds-growth.jvds-growth-links:not(.jvds-growth-approaches) > .wp3 > .jvds-growth-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 60px;
  width: 100%;
  max-width: none;
  margin-bottom: 72px;
  padding-bottom: 0;
}
body[class*="-framed"] .jvds-growth.jvds-growth-links:not(.jvds-growth-approaches) > .wp3 > .jvds-growth-heading > h2 {
  flex: 1 1 0;
  min-width: 0;
  max-width: 820px;
  margin-top: 0;
  margin-bottom: 0;
  color: var(--growth-ink);
}
body[class*="-framed"] .jvds-growth.jvds-growth-links:not(.jvds-growth-approaches) > .wp3 > .jvds-growth-heading > p {
  flex: 0 0 34%;
  width: 34%;
  max-width: 500px;
  margin: 4px 0 0;
  color: var(--growth-muted);
  font-size: 16px;
  line-height: 1.55;
  white-space: normal;
}

body[class*="-framed"] .jvds-growth.jvds-growth-links .jvds-growth-link-grid.jvds-growth-cooperation-grid,
body[class*="-framed"] .jvds-growth.jvds-growth-links .jvds-growth-resource-actions {
  gap: var(--cooperation-gap);
}
body[class*="-framed"] .jvds-growth.jvds-growth-links .jvds-growth-cooperation-grid > a {
  --growth-card-copy: rgba(0,0,0,.5);
  --growth-card-icon-ink: #000;
  --growth-card-icon-surface: #e0f94c;
  position: relative;
  margin: 0;
  border: 1px solid var(--growth-line);
  border-radius: 0;
  background: #f3f1eb;
  box-shadow: none;
  color: #000;
  overflow: visible;
}
body[class*="-framed"] .jvds-growth.jvds-growth-links .jvds-growth-cooperation-grid > a.is-selected {
  background: #e0f94c;
  border-color: var(--growth-line);
  box-shadow: none;
}
body[class*="-framed"] .jvds-growth.jvds-growth-links .jvds-growth-cooperation-grid > a > strong {
  font-size: clamp(22px,2.1vw,28px);
}
body[class*="-framed"] .jvds-growth.jvds-growth-links .jvds-growth-cooperation-grid > a > span {
  color: var(--growth-card-copy);
}
body[class*="-framed"] .jvds-growth.jvds-growth-links .jvds-growth-cooperation-grid > a::after {
  content: "";
  display: block;
  position: absolute;
  inset: -3.5px;
  width: auto;
  height: auto;
  z-index: 10;
  pointer-events: none;
  border-radius: 0;
  background:
    linear-gradient(#282821,#282821) left top / 6px 6px no-repeat,
    linear-gradient(#282821,#282821) right top / 6px 6px no-repeat,
    linear-gradient(#282821,#282821) left bottom / 6px 6px no-repeat,
    linear-gradient(#282821,#282821) right bottom / 6px 6px no-repeat;
}

/* Cards keep the homepage's light surface and uninterrupted square frame. */
body[class*="-framed"] .jvds-testimonial-hanger {
  --hanger-stage-background: #f3f1eb;
  height: auto;
  min-height: 0;
  display: block;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 200px;
  padding-bottom: 0;
}
body[class*="-framed"] .jvds-testimonial-hanger .jvds-testimonial-hanger__card {
  border-color: #d9d7cf;
  border-radius: 0;
  background: #f3f1eb;
  box-shadow: none;
  overflow: visible;
}
body[class*="-framed"] .jvds-testimonial-hanger .jvds-testimonial-hanger__item.is-active .jvds-testimonial-hanger__card {
  background: #e0f94c;
  border-color: #e0f94c;
}

/* Each grid seam is drawn once, rather than overlapping adjacent card borders. */
body[class*="-framed"] .home-partners {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 200px;
  padding-bottom: 0;
}
body[class*="-framed"] .home-partners > .wp3 {
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
}
body[class*="-framed"] .home-partners .home-section-head { margin-top: 0; }
body[class*="-framed"] .home-partners .home-partner-grid {
  position: relative;
  isolation: isolate;
  gap: 0;
  border-top: 1px solid #d9d7cf;
  border-left: 1px solid #d9d7cf;
}
body[class*="-framed"] .home-partners .home-partner-logo {
  position: relative;
  margin: 0;
  border: 0;
  border-right: 1px solid #d9d7cf;
  border-bottom: 1px solid #d9d7cf;
  border-radius: 0;
  background-color: transparent;
  overflow: visible;
  isolation: auto;
}
body[class*="-framed"] .home-partners .home-partner-logo:is(:nth-child(even), :hover) {
  background-color: transparent;
}
/* The complete logo grid owns four corner nodes; cells retain only their lines. */
body[class*="-framed"] .home-partners .home-partner-logo::after {
  content: none;
  display: none;
}
body[class*="-framed"] .home-partners .home-partner-grid::after {
  content: "";
  display: block;
  position: absolute;
  /* Top/left belong to the grid; right/bottom belong to the edge cells. */
  inset: -3.5px -2.5px -2.5px -3.5px;
  width: auto;
  height: auto;
  z-index: 10;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  pointer-events: none;
  background:
    linear-gradient(#282821,#282821) left top / 6px 6px no-repeat,
    linear-gradient(#282821,#282821) right top / 6px 6px no-repeat,
    linear-gradient(#282821,#282821) left bottom / 6px 6px no-repeat,
    linear-gradient(#282821,#282821) right bottom / 6px 6px no-repeat;
}
body[class*="-framed"] .jvds-testimonial-hanger .jvds-testimonial-hanger__card::after {
  content: "";
  display: block;
  position: absolute;
  inset: -3.5px;
  width: auto;
  height: auto;
  z-index: 10;
  pointer-events: none;
  border-radius: 0;
  background:
    linear-gradient(#282821,#282821) left top / 6px 6px no-repeat,
    linear-gradient(#282821,#282821) right top / 6px 6px no-repeat,
    linear-gradient(#282821,#282821) left bottom / 6px 6px no-repeat,
    linear-gradient(#282821,#282821) right bottom / 6px 6px no-repeat;
}

/* Remove old Studio spacing that would otherwise add to the shared module gap. */
body.jvds-about-framed .main > .row-about03 { margin-bottom: 0; }
body.jvds-about-framed .main > .about-partners + .row-about-faq { padding-top: 200px; }

@media (min-width: 801px) {
  body[class*="-framed"] .jvds-growth.jvds-growth-links:not(.jvds-growth-approaches) > .wp3 > .jvds-growth-heading > h2 {
    font-size: var(--jvds-section-title-desktop,60px);
  }
  body[class*="-framed"] .jvds-growth.jvds-growth-links .jvds-growth-cooperation-grid > a:is(.is-selected, :hover, :focus-visible) {
    --growth-card-icon-ink: #e0f94c;
    --growth-card-icon-surface: #000;
    background: #e0f94c;
    border-color: var(--growth-line);
    box-shadow: none;
  }
}
@media (min-width: 801px) and (max-width: 1280px) {
  body[class*="-framed"] .jvds-growth.jvds-growth-links:not(.jvds-growth-approaches) > .wp3 > .jvds-growth-heading { gap: 36px; }
  body[class*="-framed"] .jvds-growth.jvds-growth-links:not(.jvds-growth-approaches) > .wp3 > .jvds-growth-heading > p {
    flex-basis: 38%;
    width: 38%;
  }
}
@media (max-width: 800px) {
  body[class*="-framed"] .jvds-growth.jvds-growth-links { --cooperation-gap: 20px; }
  body[class*="-framed"] .jvds-growth.jvds-growth-links:not(.jvds-growth-approaches) > .wp3 > .jvds-growth-heading {
    display: block;
    margin-bottom: 64px;
  }
  body[class*="-framed"] .jvds-growth.jvds-growth-links:not(.jvds-growth-approaches) > .wp3 > .jvds-growth-heading > h2 { font-size: 36px; }
  body[class*="-framed"] .jvds-growth.jvds-growth-links:not(.jvds-growth-approaches) > .wp3 > .jvds-growth-heading > p {
    width: auto;
    max-width: 420px;
    margin-top: 18px;
    line-height: 1.6;
  }
  body[class*="-framed"] .jvds-growth.jvds-growth-links .jvds-growth-cooperation-grid > a.is-selected { background: #f3f1eb; }
  body[class*="-framed"] .home-partners .home-partner-logo:nth-child(-n+10) { display: flex; background-color: transparent; }
  body[class*="-framed"] .home-partners .home-partner-logo:nth-child(n+11) { display: none; }
}

/* The shared four-photo/statistic mosaic uses the approved homepage frame. */
body[class*="-framed"] .home-ai-stats.home-ai-mosaic {
  position: relative;
  gap: 0;
  isolation: isolate;
  overflow: visible;
}
body[class*="-framed"] .home-ai-mosaic .home-ai-mosaic-pair {
  position: relative;
  gap: 0;
  overflow: visible;
}
body[class*="-framed"] .home-ai-mosaic .home-ai-mosaic-card {
  margin: 0;
  border: 1px solid #d9d7cf;
  border-radius: 0;
}
body[class*="-framed"] .home-ai-mosaic .home-ai-mosaic-pair + .home-ai-mosaic-pair { margin-left: -1px; }
body[class*="-framed"] .home-ai-mosaic .home-ai-mosaic-card + .home-ai-mosaic-card { margin-top: -1px; }
body[class*="-framed"] .home-ai-mosaic .home-ai-stat { background: #f3f1eb; }
body[class*="-framed"] .home-ai-mosaic .home-ai-stat::before { opacity: .35; }
body[class*="-framed"] .home-ai-mosaic .home-ai-stat::after { content: none; }
body[class*="-framed"] .home-ai-mosaic .home-ai-mosaic-media {
  padding: 28px;
  background: #f3f1eb;
}

/* The complete mosaic owns four nodes; pair and cell seams stay as thin lines. */
body[class*="-framed"] .home-ai-mosaic .home-ai-mosaic-pair::after,
body[class*="-framed"] .home-ai-mosaic .home-ai-mosaic-card::after {
  content: none;
  display: none;
}
body[class*="-framed"] .home-ai-stats.home-ai-mosaic::after {
  content: "";
  display: block;
  position: absolute;
  inset: -2.5px;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  z-index: 10;
  pointer-events: none;
  border-radius: 0;
  background-image:
    linear-gradient(#282821,#282821),
    linear-gradient(#282821,#282821),
    linear-gradient(#282821,#282821),
    linear-gradient(#282821,#282821);
  background-position: left top, right top, left bottom, right bottom;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}
@media (min-width: 801px) and (max-width: 1279px) {
  body[class*="-framed"] .home-ai-mosaic .home-ai-mosaic-pair + .home-ai-mosaic-pair {
    margin-left: 0;
    margin-top: -1px;
  }
  body[class*="-framed"] .home-ai-mosaic .home-ai-mosaic-card + .home-ai-mosaic-card { margin-top: 0; }
}
@media (max-width: 800px) {
  body[class*="-framed"] .home-ai-mosaic .home-ai-mosaic-pair + .home-ai-mosaic-pair {
    margin-left: 0;
    margin-top: -1px;
  }
  body[class*="-framed"] .home-ai-mosaic .home-ai-mosaic-media { padding: 20px; }
}