/* V4 motion and geometry are isolated from the three reference compositions. */
.review.theme-v4 .v4-scene-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-block: 18px 8px;
  font-size: 13px;
  color: #d3ceea;
}
.review.theme-v4 .v4-scene-toolbar p {
  margin: 0;
  max-inline-size: 66ch;
}
.review.theme-v4 .v4-motion-controls {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}
.review.theme-v4 .v4-motion-controls[hidden] {
  visibility: hidden;
  display: flex !important;
}
.review.theme-v4 .v4-motion-controls .replay {
  min-block-size: 44px;
  font-size: 13px;
  padding: 6px 2px;
  color: inherit;
}
.review.theme-v4 .v4-motion-controls button:disabled {
  opacity: .48;
  cursor: default;
}
.review.theme-v4 .v4-hero .v4-showcase {
  margin-block-start: 0;
}
.review.theme-v4 .v4-showcase {
  display: grid;
  position: relative;
  isolation: isolate;
  grid-template-columns: 218px minmax(0, 1fr) 230px;
  align-items: end;
  gap: 30px;
  padding: 0 0 12px;
  margin-block-start: 0;
}
.review.theme-v4 .v4-showcase .dashboard {
  grid-template-columns: 1fr;
  margin: 0;
  min-block-size: 0;
  align-self: stretch;
}
.review.theme-v4 .v4-showcase .dashboard-main {
  padding: 20px 18px 20px 24px;
}
.review.theme-v4 .v4-showcase .dashboard-heading {
  justify-content: space-between;
  gap: 20px;
  margin-block-end: 18px;
}
.review.theme-v4 .v4-showcase .dashboard-heading h3 {
  font-size: 27px;
  margin: 0;
}
.review.theme-v4 .v4-showcase .dashboard-heading .brand {
  font-size: 10px;
  gap: 7px;
}
.review.theme-v4 .v4-showcase .dashboard-heading .brand img {
  inline-size: 25px;
}
.review.theme-v4 .v4-showcase .dashboard-body {
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.2fr);
  gap: 18px;
}
.review.theme-v4 .v4-showcase .case-list {
  position: relative;
  display: block;
}
.review.theme-v4 .v4-showcase .workflow-filter {
  margin: 0 0 10px;
  font-size: 12px;
  padding: 8px 6px;
}
.review.theme-v4 .v4-showcase .case-row {
  position: relative;
  gap: 6px 8px;
  padding: 13px 8px;
  min-block-size: 86px;
  transition: background 180ms, border-color 180ms;
}
.review.theme-v4 .v4-showcase .case-row .status {
  max-inline-size: none;
  font-size: 11px;
}
.review.theme-v4 .v4-showcase .case-row small {
  margin-block-start: 4px;
}
.review.theme-v4 .v4-showcase .case-detail {
  position: relative;
  padding: 15px 12px;
  display: flex;
  flex-direction: column;
}
.review.theme-v4 .v4-showcase .case-detail-heading {
  align-items: center;
  min-block-size: 32px;
}
.review.theme-v4 .v4-showcase .case-detail .document-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 5px 8px;
  padding-block: 12px;
}
.review.theme-v4 .v4-showcase .case-detail .document-row > .status {
  grid-column: auto;
  margin-inline-start: 0;
  justify-self: start;
}
.review.theme-v4 .v4-showcase .case-detail .ui-label {
  margin-block: 6px;
}
.review.theme-v4 .v4-showcase .case-detail .ui-note {
  margin-block: auto 0;
  padding-block-start: 16px;
  min-block-size: 58px;
  line-height: 1.55;
}
.review.theme-v4 .v4-showcase .stepper {
  margin-block: 10px 16px;
  font-size: 11px;
  gap: 4px;
}
.review.theme-v4 .v4-showcase .stepper .step-dot {
  inline-size: 28px;
  block-size: 28px;
}
.review.theme-v4 .v4-showcase .client-card {
  align-self: center;
  margin: 20px 0 0;
  padding: 20px 16px;
  position: relative;
}
.review.theme-v4 .v4-showcase .client-card h3 {
  font-size: 23px;
  line-height: 1.15;
}
.review.theme-v4 .v4-showcase .client-card > strong {
  display: block;
  margin-block-start: 16px;
  font-size: 13px;
}
.review.theme-v4 .v4-showcase .client-highlight {
  display: grid;
  gap: 3px;
  margin-block: 12px;
  font-size: 14px;
  padding: 9px 12px;
}
.review.theme-v4 .v4-showcase .client-highlight small {
  color: #625b88;
  font-size: 11px;
}
.review.theme-v4 .v4-showcase .client-card .document-row {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 8px;
  font-size: 13px;
}
.review.theme-v4 .v4-showcase .client-card .status {
  grid-column: 2;
  justify-self: start;
}
.review.theme-v4 .v4-showcase .client-card .ui-note {
  min-block-size: 82px;
  margin-block-end: 0;
  font-size: 13px;
  line-height: 1.55;
}
.review.theme-v4 .v4-wire-anchor {
  position: absolute;
  inline-size: 2px;
  block-size: 2px;
  pointer-events: none;
}
.review.theme-v4 [data-wire-target] {
  inset-inline-start: -3px;
  inset-block-start: 50%;
}
.review.theme-v4 [data-wire-team] {
  inset-inline-end: -32px;
  inset-block-start: 50%;
}
.review.theme-v4 [data-wire-portal] {
  inset-inline-start: -4px;
  inset-block-start: 50%;
}
.review.theme-v4 .v4-scene-wires {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  overflow: visible;
  z-index: 2;
  pointer-events: none;
}
.review.theme-v4 .v4-scene-wires path {
  stroke: #a494ff;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
}
.review.theme-v4 .v4-scene-wires circle {
  fill: #a494ff;
  stroke: #f0ecff;
  stroke-width: .8;
}
.review.theme-v4 .v4-scene-wires [data-wire=portal] {
  stroke: #ad9dff;
  stroke-dasharray: 3 5;
}
.review.theme-v4 .v4-layer-folder {
  position: relative;
  inline-size: 248px;
  justify-self: start;
  align-self: end;
  margin: 0 0 52px 0;
  z-index: 3;
  color: #181347;
}
.review.theme-v4 .v4-folder-depth {
  position: relative;
  aspect-ratio: 1;
  perspective: 900px;
  filter: drop-shadow(0 16px 15px #05052155);
}
.review.theme-v4 .v4-folder-material {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
}
.review.theme-v4 .v4-folder-back {
  z-index: 0;
}
.review.theme-v4 .v4-folder-sheet {
  position: absolute;
  inset: 0;
  z-index: 1;
  transform-origin: 50% 83%;
  clip-path: polygon(0 -100%, 100% -100%, 100% 75%, 79% 86%, 28% 72%, 0 67%);
}
.review.theme-v4 .v4-folder-paper {
  clip-path: polygon(24% 27%, 83.5% 32.8%, 79.2% 86%, 27.5% 73.5%);
}
.review.theme-v4 .v4-folder-cover {
  z-index: 2;
  clip-path: polygon(2% 28%, 23% 41%, 28% 70%, 74% 82%, 80% 86%, 84.4% 45%, 100% 36%, 100% 100%, 0 100%);
  transform-origin: 50% 86%;
}
.review.theme-v4 .v4-folder-copy {
  position: absolute;
  inset-inline-start: 25%;
  inset-block-end: 19%;
  inline-size: 58%;
  min-block-size: 54%;
  padding: 14px 13px 35px;
  background:
    linear-gradient(
      118deg,
      #fcfbf7,
      #eeece7);
  border: 1px solid #d9d6d1;
  border-radius: 3px;
  box-shadow: 1px 1px 2px #40372920;
  transform:
    matrix(
      1, .13,
      -.09, 1,
      0, 0);
  transform-origin: 0 0;
}
.review.theme-v4 .v4-folder-copy h3 {
  font-size: 17px;
  line-height: 1.18;
  margin: 0 0 12px;
  font-weight: 500;
}
.review.theme-v4 .v4-folder-copy ol {
  padding: 0;
  margin: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}
.review.theme-v4 .v4-folder-copy li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  line-height: 1.4;
}
.review.theme-v4 .v4-folder-copy .icon {
  inline-size: 13px;
  block-size: 13px;
  color: #5b46ce;
  flex: 0 0 auto;
}
.review.theme-v4 [data-wire-source] {
  position: absolute;
  inset-inline-end: 16%;
  inset-block-start: 67%;
  inline-size: 3px;
  block-size: 3px;
}
.review.theme-v4 .v4-showcase:is([data-hero-state=playing], [data-hero-state=paused]) .v4-folder-sheet {
  animation: v4-hero-leaf 7400ms ease-in-out both paused;
}
.review.theme-v4 .v4-showcase:is([data-hero-state=playing], [data-hero-state=paused]) .v4-folder-cover {
  animation: v4-hero-cover 7400ms ease-in-out both paused;
}
.review.theme-v4 .v4-showcase:is([data-hero-state=playing], [data-hero-state=paused]) [data-wire]:not([data-wire=portal]) {
  animation: v4-hero-wires 7400ms ease both paused;
}
.review.theme-v4 .v4-showcase:is([data-hero-state=playing], [data-hero-state=paused]) [data-wire-dot]:not([data-wire-dot=portal]) {
  animation: v4-hero-dots 7400ms ease both paused;
}
.review.theme-v4 .v4-showcase:is([data-hero-state=playing], [data-hero-state=paused]) [data-wire=portal],
.review.theme-v4 .v4-showcase:is([data-hero-state=playing], [data-hero-state=paused]) [data-wire-dot=portal] {
  animation: v4-hero-portal 7400ms ease both paused;
}
.review.theme-v4 .v4-showcase:is([data-hero-state=playing], [data-hero-state=paused]) .case-detail .v4-receipt-document {
  animation: v4-hero-receipt 7400ms ease both paused;
}
.review.theme-v4 .v4-showcase:is([data-hero-state=playing], [data-hero-state=paused]) .client-card .v4-receipt-document {
  animation: v4-hero-receipt 7400ms ease both paused;
}
@keyframes v4-hero-leaf {
  0%, 100% {
    transform: translateY(0) rotateX(0);
    filter: drop-shadow(0 0 0 #19113200);
  }
  15%, 27% {
    transform: translateY(-14px) rotateX(-8deg);
    filter: drop-shadow(0 9px 3px #19113233);
  }
  44% {
    transform: translateY(0) rotateX(0);
    filter: drop-shadow(0 0 0 #19113200);
  }
}
@keyframes v4-hero-cover {
  0%, 100% {
    transform: rotateX(0);
  }
  17%, 28% {
    transform: rotateX(-4deg);
  }
  44% {
    transform: rotateX(0);
  }
}
@keyframes v4-hero-wires {
  0%, 22% {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    opacity: .3;
  }
  42%, 100% {
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
    opacity: 1;
  }
}
@keyframes v4-hero-dots {
  0%, 33% {
    opacity: 0;
  }
  43%, 100% {
    opacity: 1;
  }
}
@keyframes v4-hero-portal {
  0%, 66% {
    opacity: .08;
  }
  84%, 100% {
    opacity: 1;
  }
}
@keyframes v4-hero-receipt {
  0%, 55% {
    background: transparent;
  }
  60%, 80% {
    background: #eae5ff;
  }
  100% {
    background: transparent;
  }
}
.review.theme-v4 .v4-reminder-toolbar {
  max-inline-size: 1100px;
  margin-inline: auto;
  display: flex;
  justify-content: flex-end;
  color: var(--muted);
  margin-block-start: 12px;
}
@media (max-width: 1100px) {
  .review.theme-v4 .v4-showcase {
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 24px 32px;
  }
  .review.theme-v4 .v4-layer-folder {
    grid-column: 1;
    grid-row: 1;
    inline-size: 225px;
  }
  .review.theme-v4 .v4-showcase .dashboard {
    grid-column: 2;
    grid-row: 1;
  }
  .review.theme-v4 .v4-showcase .client-card {
    grid-column: 2;
    grid-row: 2;
    inline-size: min(100%, 420px);
    justify-self: end;
    margin: 14px 0 0;
  }
  .review.theme-v4 [data-wire-team] {
    inset-inline-end: 50%;
    inset-block-start: auto;
    inset-block-end: -20px;
  }
  .review.theme-v4 [data-wire-portal] {
    inset-inline-start: 50%;
    inset-block-start: -4px;
  }
  .review.theme-v4 .v4-showcase .client-card .ui-note {
    min-block-size: 42px;
  }
  .review.theme-v4 .v4-showcase .dashboard-heading .brand {
    display: none;
  }
  .review.theme-v4 .v4-folder-copy h3 {
    font-size: 16px;
    margin-block-end: 12px;
  }
  .review.theme-v4 .v4-folder-copy li {
    font-size: 11px;
  }
  .review.theme-v4 .v4-showcase .case-detail .document-row {
    grid-template-columns: 18px minmax(0, 1fr);
  }
  .review.theme-v4 .v4-showcase .case-detail .document-row > .status {
    grid-column: 2;
  }
}
@media (max-width: 760px) {
  .review.theme-v4 .v4-scene-toolbar {
    flex-wrap: wrap;
    gap: 3px 12px;
    margin-block-start: 22px;
  }
  .review.theme-v4 .v4-scene-toolbar p {
    font-size: 12px;
    min-block-size: 38px;
  }
  .review.theme-v4 .v4-scene-toolbar .v4-motion-controls {
    margin-inline-start: auto;
  }
  .review.theme-v4 .v4-showcase {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 42px;
  }
  .review.theme-v4 .v4-layer-folder {
    inline-size: 270px;
    align-self: center;
    margin-block: -5px 0;
  }
  .review.theme-v4 .v4-folder-copy h3 {
    font-size: 18px;
  }
  .review.theme-v4 .v4-folder-copy li {
    font-size: 13px;
  }
  .review.theme-v4 .v4-showcase .dashboard {
    inline-size: 100%;
  }
  .review.theme-v4 .v4-showcase .dashboard-main {
    padding: 18px 12px;
  }
  .review.theme-v4 .v4-showcase .dashboard-heading {
    display: none;
  }
  .review.theme-v4 .v4-showcase .dashboard-body {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .review.theme-v4 .v4-showcase .case-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
  }
  .review.theme-v4 .v4-showcase .workflow-filter {
    display: none;
  }
  .review.theme-v4 .v4-showcase .case-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
    padding: 10px 7px;
    block-size: auto;
    margin: 0;
  }
  .review.theme-v4 .v4-showcase .case-row strong {
    font-size: 12px;
  }
  .review.theme-v4 .v4-showcase .case-row small {
    font-size: 11px;
  }
  .review.theme-v4 .v4-showcase .case-row .status {
    font-size: 10px;
    padding: 4px 5px;
    margin-block-start: auto;
  }
  .review.theme-v4 .v4-showcase .case-detail {
    padding: 16px;
  }
  .review.theme-v4 .v4-showcase .case-detail .document-row {
    font-size: 14px;
  }
  .review.theme-v4 .v4-showcase .case-detail .ui-note {
    min-block-size: 64px;
  }
  .review.theme-v4 .v4-showcase .stepper {
    font-size: 12px;
  }
  .review.theme-v4 .v4-showcase .client-card {
    inline-size: 100%;
    padding: 20px;
    margin: 0;
  }
  .review.theme-v4 .v4-showcase .client-card .ui-note {
    min-block-size: 62px;
  }
  .review.theme-v4 [data-wire-target] {
    inset-inline-start: 50%;
    inset-block-start: -4px;
  }
  .review.theme-v4 [data-wire-team] {
    inset-block-end: -34px;
  }
  .review.theme-v4 [data-wire-source] {
    inset-inline-end: 40%;
    inset-block-start: 82%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .review.theme-v4 .v4-showcase * {
    animation: none !important;
    transition: none !important;
  }
}
.review.theme-v4 .v4-hero {
  background-image:
    linear-gradient(
      180deg,
      #0b0d314d 0%,
      #0b0d314d 42%,
      #0b0d3110 72%),
    url(/v4-assets/desk.webp);
}
.review.theme-v4 .v4-paperclip {
  position: absolute;
  inset-inline-end: 4px;
  inset-block-start: -8px;
  inline-size: 14px;
  block-size: 38px;
  filter: drop-shadow(1px 2px 1px #20144133);
  transform: rotate(6deg);
}