/* Experiences: the closing actions sit on the existing dark section. */
.ge2-experiences-page .final-cta > p {
  color: #e2ddd4;
  max-width: 62ch;
}
.ge2-experiences-page .final-cta .page-intro-actions {
  justify-content: center;
  flex-wrap: wrap;
}
.ge2-experiences-page .final-cta .pill-outline {
  color: #f4f0e8;
  border-color: #aaa69f;
}
.ge2-experiences-page .final-cta .pill-outline:hover {
  color: #171918;
  background: #f4f0e8;
}

/* Submitted fields must leave layout and keyboard navigation, including
   controls whose base component styles explicitly use flex or grid. */
.ge2-experiences-page .satisfaction-survey > [hidden] {
  display: none;
}

/* These labels describe the whole questionnaire or feedback panel. Keep them
   after the content so they never cover the local-data notice or an action. */
.ge2-experiences-page :is(.satisfaction-survey, .satisfaction-insight) > .ge2-surface-truth {
  position: static;
  align-self: flex-end;
  width: fit-content;
  max-width: 100%;
  margin: 1rem 0 0 auto;
}

/* The Manager feedback surface is paper. Its parent theme originally used
   light labels for a dark panel; keep every part of this component coherent. */
.ge2-experiences-page .satisfaction-insight {
  background: linear-gradient(180deg, #fff, #f8f6f1);
  color: #232520;
}
.ge2-experiences-page .satisfaction-insight > header {
  flex-wrap: wrap;
}
.ge2-experiences-page .satisfaction-insight > header > div > span {
  color: #963812;
  font-size: .875rem;
  line-height: 1.5;
}
.ge2-experiences-page .satisfaction-insight .satisfaction-live {
  color: #57534d;
  border-color: #83766a;
  font-size: .875rem;
  line-height: 1.5;
  white-space: normal;
}
.ge2-experiences-page .satisfaction-insight .satisfaction-kpis em,
.ge2-experiences-page .satisfaction-insight .satisfaction-kpis strong span {
  color: #57534d;
  font-size: .875rem;
  line-height: 1.5;
}
.ge2-experiences-page .satisfaction-insight .satisfaction-distribution {
  background: #fffdf8;
  border-color: #83766a;
}
.ge2-experiences-page .satisfaction-insight .satisfaction-distribution > div {
  flex-wrap: wrap;
}
.ge2-experiences-page .satisfaction-insight .satisfaction-distribution > div > span {
  color: #232520;
  font-size: 1rem;
  line-height: 1.5;
}
.ge2-experiences-page .satisfaction-insight .satisfaction-distribution > div > small,
.ge2-experiences-page .satisfaction-insight .satisfaction-distribution li > span,
.ge2-experiences-page .satisfaction-insight .satisfaction-distribution li > strong {
  color: #57534d;
  font-size: .875rem;
  font-weight: 650;
  line-height: 1.5;
}
.ge2-experiences-page .satisfaction-insight .satisfaction-distribution li > i {
  background: #e2ddd4;
}
.ge2-experiences-page .satisfaction-insight .satisfaction-distribution li > i > b {
  background: #b94a1b;
}
.ge2-experiences-page .satisfaction-insight .satisfaction-reading p strong {
  color: #232520;
}
.ge2-experiences-page .satisfaction-insight .satisfaction-reading li {
  color: #57534d;
  border-color: #83766a;
  font-size: .875rem;
  line-height: 1.5;
}
.ge2-experiences-page .satisfaction-insight > footer {
  color: #57534d;
  border-color: #83766a;
  font-size: .875rem;
  line-height: 1.5;
  flex-wrap: wrap;
}

/* The narrow phone is an illustration: stack its course and action so the
   booking label stays whole without shrinking the type. */
@media (max-width: 480px) {
  .ge2-experiences-page .member-phone-scene .phone-class {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .5rem;
  }

  .ge2-experiences-page .member-phone-scene .phone-action {
    justify-self: start;
    white-space: nowrap;
  }
}