/* The Home page's example Compliance Card (card-1.js). Two faces share one stage, the Owner face and the Operator face; their look is inline, from the design package.
   Before the script runs the Owner face is shown (the tour's first state); with reduced motion the Operator face is (the design's still state); with no script at all both faces are shown
   (a <noscript> rule in the page head). card-1.js then sets data-active on the stage and shows exactly one. */
.cc-stage .cc-face[data-face="renter"] { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  .cc-stage:not([data-active]) .cc-face[data-face="owner"] { display: none !important; }
  .cc-stage:not([data-active]) .cc-face[data-face="renter"] { display: flex !important; }
}
.cc-stage[data-active="renter"] .cc-face[data-face="owner"] { display: none !important; }
.cc-stage[data-active="renter"] .cc-face[data-face="renter"] { display: flex !important; }
.cc-stage[data-active="owner"] .cc-face[data-face="renter"] { display: none !important; }
.cc-stage[data-active="owner"] .cc-face[data-face="owner"] { display: flex !important; }
.cc-face button[data-side-to] { cursor: pointer; }