/* V4 problem scene and its background-only junction with the approved hero. */
@font-face {
  font-family: "Nidria Note";
  src: url(/v4-assets/fonts/caveat-regular-latin.woff2) format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
.review.theme-v4 .nh-hero::after,
.review.theme-v4 .np-section {
  background:
    linear-gradient(
      90deg,
      #10163b,
      #0c1135 50%,
      #10153f);
}
.review.theme-v4 .nh-hero {
  position: relative;
  isolation: isolate;
}
.review.theme-v4 .nh-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 220px;
  mask-image: linear-gradient(transparent, #000);
  pointer-events: none;
}
.review.theme-v4 .np-section {
  --np-decor-fade: 220px;
  position: relative;
  isolation: isolate;
  color: #f8f6ff;
  padding-block: 46px 55px;
  border: 0;
}
.review.theme-v4 .np-background {
  position: absolute;
  z-index: -2;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
  mask-image: linear-gradient(transparent, #000 var(--np-decor-fade));
  pointer-events: none;
}
.review.theme-v4 .np-section::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(
      transparent,
      transparent 77%,
      #0e143430);
  pointer-events: none;
}
.review.theme-v4 .np-wrap {
  max-inline-size: 1536px;
  margin-inline: auto;
  padding-inline: 4.8%;
  container: np-section / inline-size;
}
.review.theme-v4 .np-heading {
  text-align: center;
}
.review.theme-v4 .np-kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  color: #c7c1fa;
  font-size: 15px;
  letter-spacing: .27em;
  line-height: 1.4;
  margin-block-end: 10px;
}
.review.theme-v4 .np-kicker::before,
.review.theme-v4 .np-kicker::after {
  content: "";
  inline-size: 80px;
  block-size: 1px;
  background: #9a89cf;
}
.review.theme-v4 .np-title {
  font: 400 clamp(42px, 5.04cqw, 70px)/.98 var(--title);
  letter-spacing: -.042em;
  max-inline-size: 1150px;
  margin-inline: auto;
  text-wrap: balance;
}
.review.theme-v4 .np-title:lang(fr) > span {
  display: block;
}
.review.theme-v4 .np-subtitle {
  color: #cac8ef;
  font-size: clamp(19px, 1.7cqw, 24px);
  line-height: 1.4;
  margin: 20px auto 0;
  max-inline-size: 1050px;
}
.review.theme-v4 .np-scene {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 64px;
  row-gap: 0;
  grid-template-rows: auto auto auto;
  margin-block-start: 22px;
}
.review.theme-v4 .np-scene::after {
  content: "";
  position: absolute;
  inset-inline-start: 50%;
  inset-block: 14px 10px;
  inline-size: 1px;
  background:
    linear-gradient(
      #7365b6 0 31%,
      transparent 31% 52%,
      #7365b6 52% 100%);
  opacity: .6;
}
.review.theme-v4 .np-scene figure {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: 1 / span 3;
  margin: 0;
  min-inline-size: 0;
}
.review.theme-v4 .np-client {
  grid-column: 2;
}
.review.theme-v4 .np-side-label {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-inline: 18% 8%;
  color: #d2cdfc;
  font: 400 23px/1.4 var(--body);
  letter-spacing: .065em;
}
.review.theme-v4 .np-side-label::after {
  content: "";
  min-inline-size: 30px;
  flex: 1;
  block-size: 1px;
  background: #9a8cd0;
}
.review.theme-v4 .np-object-stage {
  position: relative;
  container: np-object / inline-size;
  margin-block-start: 12px;
}
.review.theme-v4 .np-folder-group {
  position: relative;
  display: grid;
  grid-template-columns: 13% 28% 5% 36% 18%;
  grid-template-rows: .8fr minmax(max-content, 1fr) 1.1fr;
  min-block-size: calc(100cqw / 1.52);
  transform-origin: 50% 85%;
  container: np-folder / inline-size;
}
.review.theme-v4 .np-cutout {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  overflow: visible;
}
.review.theme-v4 .np-folder-art {
  position: absolute;
  inset: 0;
  filter: drop-shadow(0 14px 10px #03061980);
}
.review.theme-v4 .np-tab {
  position: absolute;
  color: #21175e;
  font: 400 clamp(11px, 2.15cqw, 15px)/1.1 var(--body);
  transform: rotate(8deg);
  transform-origin: top left;
  text-align: center;
  overflow-wrap: anywhere;
  inline-size: 18.5%;
}
.review.theme-v4 .np-client-tab {
  inset-inline-start: 37%;
  inset-block-start: 4.4%;
}
.review.theme-v4 .np-documents-tab {
  inset-inline-start: 56.5%;
  inset-block-start: 8.2%;
  inline-size: 22%;
}
.review.theme-v4 .np-sheet-copy {
  position: relative;
  grid-column: 4;
  grid-row: 2;
  align-self: start;
  min-inline-size: 0;
  color: #171157;
  transform: rotate(9deg);
  transform-origin: top left;
}
.review.theme-v4 .np-sheet-title {
  font: 400 clamp(19px, 4cqw, 28px)/1.17 var(--title);
  letter-spacing: -.035em;
}
.review.theme-v4 .np-missing-document {
  display: flex;
  align-items: start;
  gap: 12px;
  font-size: clamp(13px, 2.65cqw, 18px);
  line-height: 1.35;
  margin-block-start: 18px;
}
.review.theme-v4 .np-missing-document > i {
  flex: 0 0 1.2em;
  block-size: 1.2em;
  border: 1.5px solid currentColor;
  border-radius: 2px;
  margin-block-start: .08em;
}
.review.theme-v4 .np-note-copy {
  position: relative;
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  min-inline-size: 0;
  margin-block-start: 12cqw;
  transform: rotate(-12deg);
  font: 400 clamp(22px, 4.8cqw, 32px)/1.04 "Nidria Note", var(--body);
  letter-spacing: 0;
  text-wrap: balance;
  hyphens: manual;
  transform-origin: top left;
  color: #201154;
}
.review.theme-v4 .np-note-copy::after {
  content: "";
  display: block;
  inline-size: 74%;
  border-block-start: 1px solid currentColor;
  margin-block-start: 10px;
}
.review.theme-v4 .np-paper-group {
  position: absolute;
  inset-inline: -1% -3%;
  inset-block-end: 0;
  aspect-ratio: 1440/535;
  filter: drop-shadow(0 12px 9px #030619a0);
}
.review.theme-v4 .np-phone-group {
  position: relative;
  inline-size: max(245px, 42%);
  margin-inline-start: 32%;
  padding-block-start: 1%;
  padding-block-end: 4%;
  transform-origin: 50% 95%;
  container: np-phone-width / inline-size;
}
.review.theme-v4 .np-phone {
  position: relative;
  display: flow-root;
  padding-block: 38% 37%;
  min-block-size: 175cqw;
}
.review.theme-v4 .np-phone-art {
  position: absolute;
  inset: 0;
  filter: drop-shadow(0 6px 3px #07061465);
}
.review.theme-v4 .np-messages {
  position: relative;
  align-self: start;
  margin-inline: 22% 11%;
  margin-block: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  transform:
    matrix(
      1, .045,
      -.105, 1,
      0, 0);
  transform-origin: top left;
}
.review.theme-v4 .np-message {
  padding: 10px 11px;
  border-radius: 11px 11px 4px 11px;
  font: 400 18px/1.4 var(--body);
  color: #151052;
  background:
    linear-gradient(
      140deg,
      #efecff,
      #d9d3ff);
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: manual;
  text-wrap: pretty;
}
.review.theme-v4 .np-message-status {
  margin-inline: 4% 2%;
}
.review.theme-v4 .np-caption {
  max-inline-size: 510px;
  margin: 18px auto 0;
  padding-inline: 14px;
  color: #d7d2fa;
  font: 400 clamp(19px, 1.7cqw, 24px)/1.35 var(--body);
  text-align: center;
  text-wrap: balance;
}
.review.theme-v4 .np-caption:lang(fr) > span {
  display: block;
}
.review.theme-v4 .np-exchange {
  position: absolute;
  z-index: 2;
  inline-size: clamp(150px, 15cqw, 215px);
  inset-inline-start: 50%;
  inset-block-start: 42%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.review.theme-v4 .np-exchange svg {
  display: block;
  inline-size: 100%;
}
.review.theme-v4 .np-arc {
  stroke: #8d65ff;
  stroke-width: 1.8;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.review.theme-v4 .np-mail {
  filter: drop-shadow(0 3px 2px #06072180);
}
.review.theme-v4 .np-transition {
  position: relative;
  border-block-start: 1px solid #9385c7;
  margin-block-start: 28px;
  padding-block-start: 23px;
  text-align: center;
}
.review.theme-v4 .np-next {
  font: 400 clamp(25px, 2.5cqw, 36px)/1.25 var(--title);
  letter-spacing: -.025em;
}
.review.theme-v4 .np-link {
  color: #d3cdf6;
  display: inline-flex;
  font-size: 19px;
  margin-block-start: 13px;
  gap: 18px;
  padding-block: 6px 7px;
  border-block-end: 1px solid currentColor;
}
.review.theme-v4 .np-replay {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: absolute;
  inset-inline-end: 0;
  inset-block-end: 0;
  font-size: 13px;
  min-block-size: 44px;
  padding: 8px 12px;
  border: 1px solid #a295d052;
  border-radius: 6px;
  color: #d4cdec;
  background: #11153270;
}
.review.theme-v4 .np-replay .icon {
  inline-size: 16px;
  block-size: 16px;
}
.review.theme-v4 .np-link:focus-visible,
.review.theme-v4 .np-replay:focus-visible {
  outline: 2px solid #d7ceff;
  outline-offset: 5px;
}
.review.theme-v4 .np-section[data-problem-state=playing] .np-folder-group {
  animation: np-folder-enter 4400ms both;
}
.review.theme-v4 .np-section[data-problem-state=playing] .np-phone-group {
  animation: np-phone-enter 4400ms both;
}
.review.theme-v4 .np-section[data-problem-state=playing] .np-message-receipt {
  animation: np-receipt 4400ms both;
}
.review.theme-v4 .np-section[data-problem-state=playing] .np-message-status {
  animation: np-status 4400ms both;
}
.review.theme-v4 .np-section[data-problem-state=playing] .np-mail-out {
  animation: np-letter-out 4400ms both;
}
.review.theme-v4 .np-section[data-problem-state=playing] .np-mail-back {
  animation: np-letter-back 4400ms both;
}
@keyframes np-folder-enter {
  0% {
    transform: translateY(12px) rotate(-1deg);
  }
  20%, 100% {
    transform: none;
  }
}
@keyframes np-phone-enter {
  0%, 4% {
    transform: translateY(15px) rotate(1.1deg);
  }
  24%, 100% {
    transform: none;
  }
}
@keyframes np-receipt {
  0%, 18% {
    opacity: 0;
    transform: translateY(6px);
  }
  35%, 100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes np-status {
  0%, 42% {
    opacity: 0;
    transform: translateY(6px);
  }
  59%, 100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes np-letter-out {
  0%, 20% {
    transform: translate(-15px, 3px);
  }
  50% {
    transform: translate(2px, -2px);
  }
  73%, 100% {
    transform: none;
  }
}
@keyframes np-letter-back {
  0%, 40% {
    transform: translate(15px, -3px);
  }
  65% {
    transform: translate(-2px, 2px);
  }
  85%, 100% {
    transform: none;
  }
}
@media (hover: hover) and (pointer: fine) {
  .review.theme-v4 .np-link:hover {
    color: #fff;
  }
  .review.theme-v4 .np-replay:hover {
    background: #2a255570;
    border-color: #b4a6e6;
  }
}
@media (max-width: 1100px) {
  .review.theme-v4 .np-section {
    padding-block: 55px 45px;
  }
  .review.theme-v4 .np-background {
    object-fit: cover;
    opacity: .5;
  }
  .review.theme-v4 .np-scene {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    max-inline-size: 660px;
    margin-inline: auto;
    gap: 45px;
    margin-block-start: 40px;
  }
  .review.theme-v4 .np-scene figure {
    display: block;
    grid-row: auto;
    grid-column: auto;
  }
  .review.theme-v4 .np-scene::after,
  .review.theme-v4 .np-exchange {
    display: none;
  }
  .review.theme-v4 .np-side-label {
    font-size: 22px;
  }
  .review.theme-v4 .np-caption {
    font-size: 21px;
  }
  .review.theme-v4 .np-replay {
    position: static;
    margin-block-start: 18px;
  }
  .review.theme-v4 .np-transition .np-link {
    display: flex;
    inline-size: fit-content;
    max-inline-size: 100%;
    margin-inline: auto;
  }
}
@media (max-width: 600px) {
  .review.theme-v4 .np-section {
    --np-decor-fade: 120px;
  }
  .review.theme-v4 .nh-hero::after {
    block-size: 120px;
  }
  .review.theme-v4 .np-wrap {
    padding-inline: 22px;
  }
  .review.theme-v4 .np-title {
    font-size: 38px;
    line-height: 1.09;
  }
  .review.theme-v4 .np-title:lang(fr) > span {
    display: inline;
  }
  .review.theme-v4 .np-kicker {
    font-size: 11px;
    gap: 14px;
    letter-spacing: .23em;
  }
  .review.theme-v4 .np-kicker::before,
  .review.theme-v4 .np-kicker::after {
    inline-size: 40px;
  }
  .review.theme-v4 .np-subtitle {
    font-size: 18px;
    line-height: 1.45;
    margin-block-start: 20px;
  }
  .review.theme-v4 .np-side-label {
    font-size: 20px;
    margin-inline: 2%;
  }
  .review.theme-v4 .np-object-stage {
    margin-block-start: 20px;
  }
  .review.theme-v4 .np-caption {
    font-size: 18px;
    padding-inline: 0;
    margin-block-start: 18px;
  }
  .review.theme-v4 .np-note-copy {
    font-size: 22px;
  }
  .review.theme-v4 .np-folder-group {
    grid-template-columns: 13% 28% 3% 39% 17%;
    grid-template-rows: .5fr minmax(max-content, 1fr) 1.4fr;
  }
  .review.theme-v4 .np-note-copy {
    margin-block-start: 15cqw;
  }
  .review.theme-v4 .np-sheet-title {
    font-size: 19px;
  }
  .review.theme-v4 .np-missing-document {
    font-size: 14px;
    gap: 7px;
    margin-block-start: 10px;
  }
  .review.theme-v4 .np-tab {
    font-size: 10px;
  }
  .review.theme-v4 .np-client-stage {
    aspect-ratio: auto;
    padding-block-end: 35px;
  }
  .review.theme-v4 .np-paper-group {
    inset-block-end: 0;
  }
  .review.theme-v4 .np-phone-group {
    inline-size: min(240px, 80%);
    max-inline-size: 240px;
    margin-inline: auto;
    padding-block: 0 20px;
  }
  .review.theme-v4 .np-message {
    font-size: 16px;
  }
  .review.theme-v4 .np-messages {
    gap: 24px;
  }
  .review.theme-v4 .np-transition {
    margin-block-start: 32px;
    padding-block-start: 25px;
  }
  .review.theme-v4 .np-next {
    font-size: 28px;
  }
  .review.theme-v4 .np-link {
    font-size: 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .review.theme-v4 .np-section * {
    animation: none !important;
  }
  .review.theme-v4 .np-replay {
    display: none !important;
  }
}
.review.theme-v4 .np-section[data-problem-assets=unavailable] .np-sheet-copy,
.review.theme-v4 .np-section[data-problem-assets=unavailable] .np-note-copy {
  background: #faf7f4;
  padding: 8px;
}