.test-home #hero-title {
  max-width: 640px;
  font-size: clamp(41px, 4.15vw, 58px);
}

.test-feature-section { background: #fff; }

.test-feature-layout {
  --test-feature-duration: 10000ms;
  width: min(100%, 1000px);
  margin: 0 auto;
}

.test-feature-copy > p {
  max-width: 540px;
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 16px;
}

.test-feature-controls {
  position: relative;
  min-height: 54px;
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) 42px;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
  overflow: hidden;
  background: #f1f4f3;
}

.test-feature-controls::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: var(--brand-blue-dark);
  transform: scaleX(0);
  transform-origin: left center;
}

.test-feature-layout.is-running .test-feature-controls::after { animation: testFeatureProgress var(--test-feature-duration) linear forwards; }

.test-feature-controls button {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 19px;
  cursor: pointer;
  transition: background .18s ease;
}

.test-feature-controls > span {
  min-width: 0;
  overflow: hidden;
  text-align: center;
}

.test-feature-controls > span :is(strong,small) { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.test-feature-controls > span strong { color: var(--ink); font-family: "Manrope",Arial,sans-serif; font-size: 14px; font-weight: 800; }
.test-feature-controls > span small { margin-top: 2px; color: #60717a; font-size: 10px; }

.test-feature-panel { min-width: 0; }

.test-feature-tagline {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
  max-width: 100%;
}

.test-feature-stage {
  position: relative;
  min-height: 470px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  isolation: isolate;
  background: #dce8de;
  box-shadow: 0 22px 54px rgba(24, 66, 88, .13);
}

.test-map-base,
.test-map-route {
  position: absolute;
  inset: 0;
}

.test-map-base {
  z-index: 1;
  overflow: hidden;
  background: #ecebe5;
}

.test-map-base svg,
.test-map-base > img { width: 100%; height: 100%; display: block; }
.test-map-base > img { object-fit: fill; filter: saturate(.92) contrast(1.03); }
.test-map-water { fill: #c8e6f1; }
.test-map-green { fill: #cfe5c5; }
.test-map-green-light { fill: #e2edd9; }
.test-map-road-casing path { fill: none; stroke: #d4d0c8; stroke-width: 77; }
.test-map-road-fill path { fill: none; stroke: #f5edcf; stroke-width: 70; }
.test-map-road-fill path.is-main { stroke: #fbf2cf; }
.test-map-road-centre path { fill: none; stroke: #d5cdb7; stroke-width: 2; stroke-dasharray: 24 18; }
.test-map-secondary-casing path { fill: none; stroke: #d3d0ca; stroke-width: 30; }
.test-map-secondary-fill path { fill: none; stroke: #e8e5de; stroke-width: 24; }
.test-map-buildings rect { fill: #d8d3cc; stroke: #c3bdb4; stroke-width: 2; filter: drop-shadow(3px 3px 0 rgba(84,78,69,.08)); }
.test-map-buildings rect:nth-child(3n+2) { fill: #ddd5c6; }
.test-map-trees circle { fill: #76a66f; stroke: #60925d; stroke-width: 2; }

.test-map-route { z-index: 3; pointer-events: none; }

.test-map-route > span {
  position: absolute;
  display: block;
  background: #2388bd;
  box-shadow: 0 0 0 3px rgba(255,255,255,.8);
}

.test-route-start {
  left: 8%;
  top: calc(73% - 3px);
  width: 31%;
  height: 6px;
  transform: scaleX(0);
  transform-origin: left center;
}

.test-route-turn {
  left: calc(39% - 3px);
  top: 30%;
  width: 6px;
  height: 43%;
  transform: scaleY(0);
  transform-origin: center bottom;
}

.test-route-finish {
  left: 39%;
  top: calc(30% - 3px);
  width: 31%;
  height: 6px;
  transform: scaleX(0);
  transform-origin: left center;
}

.test-route-origin {
  position: absolute;
  left: calc(8% - 7px);
  top: calc(73% - 8px);
  width: 16px;
  height: 16px;
  background: #fff;
  box-shadow: inset 0 0 0 5px #2388bd, 0 0 0 4px rgba(35,136,189,.17);
}

.test-workplace-radius {
  position: absolute;
  z-index: 3;
  left: 60%;
  top: 20%;
  width: 20%;
  aspect-ratio: 1;
  opacity: .38;
  border: 2px solid #176f9d;
  border-radius: 50% !important;
  background: rgba(112,192,240,.3);
  transform: scale(.75);
}

.test-workplace-radius span {
  position: absolute;
  inset: 18%;
  border: 1px solid rgba(23,111,157,.6);
  border-radius: 50% !important;
}

.test-workplace-marker {
  position: absolute;
  z-index: 8;
  left: 70%;
  top: 30%;
  width: 34px;
  height: 34px;
  color: #151b1a;
  transform: translate(-17px, -34px);
}

.test-workplace-marker > div {
  position: absolute;
  left: 0;
  bottom: 44px;
  min-width: 154px;
  display: grid;
  padding: 8px 10px;
  background: #fff;
  text-align: center;
  box-shadow: 4px 4px 0 rgba(37,62,52,.16);
  transform: none;
}
.test-workplace-marker small { color: #777d79; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.test-workplace-marker strong { overflow: hidden; font-family: "Manrope",Arial,sans-serif; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }

.test-workplace-pin {
  position: relative;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50% 50% 50% 0 !important;
  background: #d7553d;
  color: #fff;
  box-shadow: 0 2px 0 #a43c2a, 0 0 0 3px rgba(255,255,255,.9);
  transform: rotate(-45deg);
}

.test-workplace-pin i {
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 17px;
  font-style: normal;
  line-height: 1;
  transform: rotate(45deg);
}

.test-map-user {
  position: absolute;
  z-index: 7;
  left: 2%;
  top: 62%;
  width: clamp(64px, 9%, 78px);
  min-height: 78px;
  opacity: 0;
  will-change: left, top, opacity;
}

.test-map-user-pin {
  position: relative;
  z-index: 2;
  width: 58px;
  height: 58px;
  display: block;
  border: 4px solid #fff;
  border-radius: 50% !important;
  background: #176f9d;
  box-shadow: 0 0 0 4px #176f9d, 0 8px 18px rgba(24,55,68,.22);
}

.test-map-user-pin::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: -12px;
  width: 20px;
  height: 20px;
  background: #176f9d;
  transform: translateX(-50%) rotate(45deg);
}

.test-map-user-pin img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 50% !important;
}

.test-map-user > strong {
  position: absolute;
  z-index: 4;
  left: 29px;
  top: 67px;
  min-width: 62px;
  padding: 4px 7px;
  background: #fff;
  color: #17201d;
  font-family: "Manrope",Arial,sans-serif;
  font-size: 9px;
  text-align: center;
  box-shadow: 3px 3px 0 rgba(24,55,68,.14);
  transform: translateX(-50%);
}

.test-checkin-phone {
  position: absolute;
  z-index: 10;
  left: 5%;
  top: 8%;
  width: clamp(178px, 29%, 232px);
  min-height: 176px;
  padding: 12px;
  opacity: 0;
  background: #fff;
  color: #151b1a;
  box-shadow: 8px 8px 0 rgba(21,27,26,.2);
  transform: translateY(10px) scale(.96);
}

.test-phone-brand {
  min-height: 30px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding-bottom: 9px;
  box-shadow: inset 0 -1px #e2e7e4;
}

.test-phone-brand img { width: 25px; height: 25px; object-fit: contain; }
.test-phone-brand strong { font-family: "Manrope",Arial,sans-serif; font-size: 12px; }

.test-phone-action,
.test-phone-confirmed {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 52px;
  bottom: 12px;
}

.test-phone-action { display: grid; align-content: start; opacity: 1; }
.test-phone-action small { color: #176f9d; font-size: 9px; font-weight: 800; }
.test-phone-action strong { margin-top: 3px; font-family: "Manrope",Arial,sans-serif; font-size: 13px; }
.test-phone-action > span { min-height: 39px; display: grid; place-items: center; align-self: end; margin-top: 18px; background: #176f9d; color: #fff; font-size: 12px; font-weight: 800; box-shadow: 0 5px 0 #0d5378; }

.test-phone-confirmed {
  display: grid;
  place-items: center;
  align-content: center;
  opacity: 0;
  text-align: center;
}

.test-phone-confirmed > span {
  width: 47px;
  height: 47px;
  display: grid;
  place-items: center;
  background: #1c9b63;
  transform: scale(.5);
}

.test-phone-confirmed > span i {
  width: 21px;
  height: 11px;
  border-left: 4px solid #fff;
  border-bottom: 4px solid #fff;
  transform: translateY(-2px) rotate(-45deg);
}

.test-phone-confirmed strong { margin-top: 7px; font-family: "Manrope",Arial,sans-serif; font-size: 16px; }
.test-phone-confirmed small { color: #65716d; font-size: 9px; }

.test-scene-status {
  position: absolute;
  z-index: 12;
  left: 17px;
  right: 17px;
  bottom: 13px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #41514c;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

.test-scene-status span { display: inline-flex; align-items: center; gap: 7px; }
.test-scene-status i { width: 7px; height: 7px; border-radius: 50% !important; background: #2388bd; box-shadow: 0 0 0 4px rgba(35,136,189,.16); }

.test-scene-replay {
  position: absolute;
  z-index: 14;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  background: rgba(255,255,255,.9);
  color: #151b1a;
  font-size: 23px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 4px 4px 0 rgba(21,27,26,.16);
}

.test-feature-stage.is-playing .test-map-user { animation: testMapJourney 10s linear infinite; }
.test-feature-stage.is-playing .test-map-user-pin { animation: testMapUserMotion 10s ease infinite; }
.test-feature-stage.is-playing .test-workplace-radius { animation: testWorkplaceRadius 10s ease infinite; }
.test-feature-stage.is-playing .test-route-start { animation: testRouteStart 10s linear infinite; }
.test-feature-stage.is-playing .test-route-turn { animation: testRouteTurn 10s linear infinite; }
.test-feature-stage.is-playing .test-route-finish { animation: testRouteFinish 10s linear infinite; }
.test-feature-stage.is-playing .test-checkin-phone { animation: testCheckinPhone 10s ease infinite; }
.test-feature-stage.is-playing .test-phone-action { animation: testPhoneAction 10s steps(1,end) infinite; }
.test-feature-stage.is-playing .test-phone-action > span { animation: testCheckinTap 10s steps(1,end) infinite; }
.test-feature-stage.is-playing .test-phone-confirmed { animation: testPhoneConfirmed 10s steps(1,end) infinite; }
.test-feature-stage.is-playing .test-phone-confirmed > span { animation: testTickPop 10s ease infinite; }

.test-feature-stage.is-paused :is(.test-map-user, .test-map-user-pin, .test-workplace-radius, .test-route-start, .test-route-turn, .test-route-finish, .test-checkin-phone, .test-phone-action, .test-phone-action > span, .test-phone-confirmed, .test-phone-confirmed > span) {
  animation-play-state: paused;
}

@keyframes testMapJourney {
  0% { left: 2%; top: 62%; opacity: 0; }
  5%, 8% { left: 2%; top: 62%; opacity: 1; }
  28% { left: 33%; top: 62%; opacity: 1; }
  40% { left: 33%; top: 16%; opacity: 1; }
  52%, 92% { left: 60%; top: 16%; opacity: 1; }
  97%, 100% { left: 60%; top: 34%; opacity: 0; }
}

@keyframes testMapUserMotion {
  0%,8%,16%,24%,32%,40%,48% { transform: translateY(0); }
  4%,12%,20%,28%,36%,44%,52% { transform: translateY(-4px); }
  54%,100% { transform: translateY(0); }
}

@keyframes testRouteStart {
  0%, 8% { transform: scaleX(0); }
  28%, 100% { transform: scaleX(1); }
}

@keyframes testRouteTurn {
  0%, 28% { transform: scaleY(0); }
  40%, 100% { transform: scaleY(1); }
}

@keyframes testRouteFinish {
  0%, 40% { transform: scaleX(0); }
  52%, 100% { transform: scaleX(1); }
}

@keyframes testWorkplaceRadius {
  0%, 39% { opacity: .18; transform: scale(.72); }
  46% { opacity: .48; transform: scale(1); }
  52%, 60%, 68%, 76%, 84%, 92% { opacity: .48; transform: scale(.96); }
  56%, 64%, 72%, 80%, 88% { opacity: .3; transform: scale(1.05); }
  97%, 100% { opacity: .18; transform: scale(.72); }
}

@keyframes testCheckinPhone {
  0%, 51% { opacity: 0; transform: translateY(10px) scale(.96); }
  56%, 92% { opacity: 1; transform: translateY(0) scale(1); }
  97%, 100% { opacity: 0; transform: translateY(0) scale(1); }
}

@keyframes testPhoneAction {
  0%, 55% { opacity: 0; }
  58%, 71% { opacity: 1; }
  74%, 100% { opacity: 0; }
}

@keyframes testCheckinTap {
  0%, 64% { transform: translateY(0); box-shadow: 0 5px 0 #0d5378; }
  67%, 70% { transform: translateY(4px); box-shadow: 0 1px 0 #0d5378; }
  72%, 100% { transform: translateY(0); box-shadow: 0 5px 0 #0d5378; }
}

@keyframes testPhoneConfirmed {
  0%, 71% { opacity: 0; }
  74%, 92% { opacity: 1; }
  97%, 100% { opacity: 0; }
}

@keyframes testTickPop {
  0%, 71% { transform: scale(.5); }
  76% { transform: scale(1.16); }
  80%, 92% { transform: scale(1); }
  97%, 100% { transform: scale(.5); }
}

@keyframes testFeatureProgress { to { transform: scaleX(1); } }

.test-feature-panel[hidden] { display: none; }

.test-workplace-id-stage {
  color: #17201d;
  background: #d8d1c5;
}

.test-wid-room,
.test-wid-wrong-scene {
  position: absolute;
  inset: 0;
}

.test-wid-room {
  z-index: 1;
  overflow: hidden;
  background: linear-gradient(to bottom, #e8e2d8 0 72%, #b9a895 72% 100%);
}

.test-wid-room::before {
  content: "";
  position: absolute;
  inset: 0 0 28%;
  opacity: .32;
  background-image: linear-gradient(90deg, transparent 49.7%, rgba(72,65,58,.12) 50%, transparent 50.3%), linear-gradient(transparent 49.7%, rgba(72,65,58,.1) 50%, transparent 50.3%);
  background-size: 72px 72px;
}

.test-wid-window {
  position: absolute;
  left: 7%;
  top: 11%;
  width: 25%;
  height: 39%;
  overflow: hidden;
  background: #9bd1e6;
  box-shadow: inset 0 0 0 8px #f5f1ea, 7px 7px 0 rgba(47,62,67,.14);
}

.test-wid-window::before,
.test-wid-window::after {
  content: "";
  position: absolute;
  z-index: 2;
  background: #f5f1ea;
}

.test-wid-window::before { left: 49%; top: 0; width: 7px; height: 100%; }
.test-wid-window::after { left: 0; top: 52%; width: 100%; height: 7px; }
.test-wid-window i { position: absolute; bottom: 0; width: 38%; background: #5f8c77; }
.test-wid-window i:nth-child(1) { left: -4%; height: 37%; }
.test-wid-window i:nth-child(2) { left: 32%; height: 52%; background: #709b78; }
.test-wid-window i:nth-child(3) { right: -3%; height: 30%; }

.test-wid-menu {
  position: absolute;
  right: 8%;
  top: 10%;
  width: 25%;
  height: 28%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px 12px;
  align-content: center;
  padding: 9px 13px;
  background: #26393e;
  color: #f6d46c;
  box-shadow: 7px 7px 0 rgba(38,57,62,.17);
}

.test-wid-menu strong { grid-column: 1 / -1; font-family: "Manrope",Arial,sans-serif; font-size: 10px; letter-spacing: 0; text-align: center; }
.test-wid-menu i { height: 3px; background: #e9e7df; opacity: .78; }

.test-wid-shelf {
  position: absolute;
  right: 7%;
  top: 46%;
  width: 29%;
  height: 11%;
  display: flex;
  align-items: end;
  justify-content: space-around;
  padding: 0 8px 8px;
  box-shadow: inset 0 -7px #6f4935;
}

.test-wid-shelf span { width: 16%; height: 52%; background: #d75b47; box-shadow: inset 0 4px #f4eee5; }
.test-wid-shelf span:nth-child(2) { height: 70%; background: #e5b848; }
.test-wid-shelf span:nth-child(3) { background: #4f8c7c; }
.test-wid-shelf span:nth-child(4) { height: 62%; background: #5c7fb2; }

.test-wid-plant { position: absolute; left: 9%; bottom: 19%; width: 12%; height: 25%; background: #9a6444; clip-path: polygon(20% 63%,80% 63%,70% 100%,30% 100%); }
.test-wid-plant i { position: absolute; bottom: 35%; width: 44%; height: 55%; border-radius: 70% 10% 70% 10% !important; background: #5e9666; transform-origin: 50% 100%; }
.test-wid-plant i:nth-child(1) { left: 3%; transform: rotate(-30deg); }
.test-wid-plant i:nth-child(2) { left: 31%; height: 68%; }
.test-wid-plant i:nth-child(3) { right: 0; transform: rotate(34deg) scaleX(-1); }

.test-wid-counter { position: absolute; left: 22%; right: 0; bottom: 0; height: 25%; background: #76513c; box-shadow: inset 0 12px #b9825c; }
.test-wid-counter span { position: absolute; right: 14%; top: -38%; width: 17%; height: 39%; background: #2d3c3f; box-shadow: inset 0 7px #70868a; }

.test-wid-person {
  position: absolute;
  z-index: 4;
  left: 41%;
  bottom: 15%;
  width: clamp(90px, 15%, 122px);
  aspect-ratio: 276 / 313;
  transform: translateX(-50%);
}

.test-wid-person img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }

.test-wid-face-frame {
  position: absolute;
  left: 23%;
  top: 4%;
  width: 54%;
  height: 42%;
  opacity: 0;
  box-shadow: inset 3px 0 #70c0f0, inset -3px 0 #70c0f0, inset 0 3px #70c0f0, inset 0 -3px #70c0f0;
}

.test-wid-camera {
  position: absolute;
  z-index: 6;
  inset: 5%;
  pointer-events: none;
}

.test-wid-corner { position: absolute; width: 36px; height: 36px; border-color: rgba(255,255,255,.92); border-style: solid; }
.test-wid-corner.is-top-left { left: 0; top: 0; border-width: 3px 0 0 3px; }
.test-wid-corner.is-top-right { right: 0; top: 0; border-width: 3px 3px 0 0; }
.test-wid-corner.is-bottom-left { left: 0; bottom: 0; border-width: 0 0 3px 3px; }
.test-wid-corner.is-bottom-right { right: 0; bottom: 0; border-width: 0 3px 3px 0; }

.test-wid-scan-line { position: absolute; left: 2%; right: 2%; top: 10%; height: 2px; opacity: 0; background: #70c0f0; box-shadow: 0 0 14px rgba(112,192,240,.9); }

.test-wid-anchor {
  position: absolute;
  min-width: 50px;
  padding: 4px 6px;
  opacity: 0;
  color: #fff;
  background: rgba(23,111,157,.84);
  font-size: 8px;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
  box-shadow: 0 0 0 2px rgba(255,255,255,.72);
}

.test-wid-anchor.is-menu { right: 4%; top: 7%; }
.test-wid-anchor.is-shelf { right: 5%; top: 48%; }
.test-wid-anchor.is-counter { right: 28%; bottom: 5%; }

.test-wid-phase,
.test-wid-verify-phase {
  position: absolute;
  z-index: 9;
  display: grid;
  padding: 11px 13px;
  background: rgba(255,255,255,.94);
  box-shadow: 6px 6px 0 rgba(27,39,35,.16);
}

.test-wid-phase { left: 5%; top: 7%; min-width: 196px; }
.test-wid-phase small,
.test-wid-verify-phase small,
.test-wid-saved small,
.test-wid-approved small { color: #176f9d; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.test-wid-phase strong,
.test-wid-verify-phase > strong { margin-top: 2px; font-family: "Manrope",Arial,sans-serif; font-size: 14px; }

.test-wid-captures { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-top: 10px; }
.test-wid-captures i { height: 5px; background: #d8dfdc; }

.test-wid-saved,
.test-wid-approved {
  position: absolute;
  z-index: 14;
  left: 50%;
  top: 50%;
  min-width: 260px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 15px;
  opacity: 0;
  background: #fff;
  box-shadow: 8px 8px 0 rgba(27,39,35,.2);
  transform: translate(-50%,-44%) scale(.94);
}

.test-wid-saved > span,
.test-wid-approved > span { width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; background: #1c9b63; }
.test-wid-saved > span i,
.test-wid-approved > span i,
.test-wid-check i { width: 17px; height: 9px; border-left: 3px solid #fff; border-bottom: 3px solid #fff; transform: translateY(-2px) rotate(-45deg); }
.test-wid-saved > div,
.test-wid-approved > div { display: grid; }
.test-wid-saved strong,
.test-wid-approved strong { font-family: "Manrope",Arial,sans-serif; font-size: 14px; }

.test-wid-wrong-scene {
  z-index: 12;
  overflow: hidden;
  background: #deddd7;
  box-shadow: inset 0 0 0 5px #ce4c42;
  transform: translateX(105%);
}

.test-wid-blank-wall { position: absolute; inset: 0 0 25%; background: #e9e8e3; }
.test-wid-wrong-scene::before { content: ""; position: absolute; left: 10%; top: 14%; width: 22%; height: 36%; background: #d3d1cb; box-shadow: inset 0 0 0 7px #f4f2ec; }
.test-wid-wrong-scene::after { content: ""; position: absolute; inset: auto 0 0; height: 25%; background: #b9b7b0; }
.test-wid-wrong-scene img { position: absolute; z-index: 2; left: 50%; bottom: 12%; width: clamp(90px,15%,122px); image-rendering: pixelated; transform: translateX(-50%); }
.test-wid-wrong-scene > div:last-child { position: absolute; z-index: 3; right: 5%; bottom: 7%; display: grid; padding: 11px 13px; background: #fff; box-shadow: 6px 6px 0 rgba(27,39,35,.18); }
.test-wid-wrong-scene small { color: #727b77; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.test-wid-wrong-scene strong { color: #a83731; font-family: "Manrope",Arial,sans-serif; font-size: 14px; }

.test-wid-verify-phase { left: 5%; bottom: 6%; min-width: 220px; opacity: 0; }
.test-wid-check { display: flex; align-items: center; gap: 7px; margin-top: 7px; color: #40504a; font-size: 10px; font-weight: 800; }
.test-wid-check i { width: 14px; height: 8px; opacity: 0; border-color: #1c9b63; }

.test-wid-camera-label { position: absolute; z-index: 10; right: 5%; top: 5%; display: flex; align-items: center; gap: 7px; padding: 7px 9px; color: #fff; background: rgba(20,29,27,.72); font-size: 9px; font-weight: 800; }
.test-wid-camera-label i { width: 13px; height: 10px; border: 2px solid currentColor; border-radius: 50% !important; box-shadow: inset 0 0 0 2px rgba(20,29,27,.72); }

.test-workplace-id-stage.is-playing .test-wid-enrol-phase { animation: testWidEnrolPhase 15s ease infinite; }
.test-workplace-id-stage.is-playing .test-wid-scan-line { animation: testWidScan 15s ease-in-out infinite; }
.test-workplace-id-stage.is-playing .test-wid-anchor { animation: testWidAnchors 15s ease infinite; }
.test-workplace-id-stage.is-playing .test-wid-face-frame { animation: testWidFaceFrame 15s ease infinite; }
.test-workplace-id-stage.is-playing .test-wid-captures i:nth-child(1) { animation: testWidCaptureOne 15s steps(1,end) infinite; }
.test-workplace-id-stage.is-playing .test-wid-captures i:nth-child(2) { animation: testWidCaptureTwo 15s steps(1,end) infinite; }
.test-workplace-id-stage.is-playing .test-wid-captures i:nth-child(3) { animation: testWidCaptureThree 15s steps(1,end) infinite; }
.test-workplace-id-stage.is-playing .test-wid-captures i:nth-child(4) { animation: testWidCaptureFour 15s steps(1,end) infinite; }
.test-workplace-id-stage.is-playing .test-wid-captures i:nth-child(5) { animation: testWidCaptureFive 15s steps(1,end) infinite; }
.test-workplace-id-stage.is-playing .test-wid-saved { animation: testWidSaved 15s ease infinite; }
.test-workplace-id-stage.is-playing .test-wid-wrong-scene { animation: testWidWrongScene 15s cubic-bezier(.76,0,.24,1) infinite; }
.test-workplace-id-stage.is-playing .test-wid-verify-phase { animation: testWidVerify 15s ease infinite; }
.test-workplace-id-stage.is-playing .test-wid-check.is-face i { animation: testWidCheckFace 15s steps(1,end) infinite; }
.test-workplace-id-stage.is-playing .test-wid-check.is-place i { animation: testWidCheckPlace 15s steps(1,end) infinite; }
.test-workplace-id-stage.is-playing .test-wid-approved { animation: testWidApproved 15s ease infinite; }
.test-workplace-id-stage.is-playing .test-wid-camera { animation: testWidCameraState 15s steps(1,end) infinite; }

.test-workplace-id-stage.is-paused :is(.test-wid-enrol-phase,.test-wid-scan-line,.test-wid-anchor,.test-wid-face-frame,.test-wid-captures i,.test-wid-saved,.test-wid-wrong-scene,.test-wid-verify-phase,.test-wid-check i,.test-wid-approved,.test-wid-camera) { animation-play-state: paused; }

@keyframes testWidEnrolPhase { 0%,30% { opacity: 1; } 34%,100% { opacity: 0; } }
@keyframes testWidScan { 0%,5% { top: 9%; opacity: 0; } 8% { opacity: 1; } 29% { top: 88%; opacity: 1; } 32%,66% { opacity: 0; } 69% { top: 9%; opacity: 1; } 82% { top: 88%; opacity: 1; } 85%,100% { opacity: 0; } }
@keyframes testWidAnchors { 0%,8% { opacity: 0; transform: scale(.88); } 13%,29% { opacity: 1; transform: scale(1); } 33%,67% { opacity: 0; } 72%,83% { opacity: 1; transform: scale(1); } 86%,100% { opacity: 0; } }
@keyframes testWidFaceFrame { 0%,7% { opacity: 0; } 12%,29% { opacity: 1; } 33%,68% { opacity: 0; } 72%,84% { opacity: 1; box-shadow: inset 3px 0 #70c0f0,inset -3px 0 #70c0f0,inset 0 3px #70c0f0,inset 0 -3px #70c0f0; } 86%,95% { opacity: 1; box-shadow: inset 3px 0 #1c9b63,inset -3px 0 #1c9b63,inset 0 3px #1c9b63,inset 0 -3px #1c9b63; } 98%,100% { opacity: 0; } }
@keyframes testWidCaptureOne { 0%,10% { background: #d8dfdc; } 11%,100% { background: #1c9b63; } }
@keyframes testWidCaptureTwo { 0%,14% { background: #d8dfdc; } 15%,100% { background: #1c9b63; } }
@keyframes testWidCaptureThree { 0%,18% { background: #d8dfdc; } 19%,100% { background: #1c9b63; } }
@keyframes testWidCaptureFour { 0%,22% { background: #d8dfdc; } 23%,100% { background: #1c9b63; } }
@keyframes testWidCaptureFive { 0%,26% { background: #d8dfdc; } 27%,100% { background: #1c9b63; } }
@keyframes testWidSaved { 0%,30% { opacity: 0; transform: translate(-50%,-44%) scale(.94); } 34%,41% { opacity: 1; transform: translate(-50%,-50%) scale(1); } 44%,100% { opacity: 0; transform: translate(-50%,-50%) scale(1); } }
@keyframes testWidWrongScene { 0%,45% { transform: translateX(105%); } 49%,61% { transform: translateX(0); } 65%,100% { transform: translateX(-105%); } }
@keyframes testWidVerify { 0%,65% { opacity: 0; transform: translateY(8px); } 69%,85% { opacity: 1; transform: translateY(0); } 88%,100% { opacity: 0; } }
@keyframes testWidCheckFace { 0%,73% { opacity: 0; } 74%,100% { opacity: 1; } }
@keyframes testWidCheckPlace { 0%,78% { opacity: 0; } 79%,100% { opacity: 1; } }
@keyframes testWidApproved { 0%,84% { opacity: 0; transform: translate(-50%,-44%) scale(.94); } 88%,95% { opacity: 1; transform: translate(-50%,-50%) scale(1); } 98%,100% { opacity: 0; } }
@keyframes testWidCameraState { 0%,84% { box-shadow: none; } 85%,96% { box-shadow: inset 0 0 0 3px #1c9b63; } 98%,100% { box-shadow: none; } }

@media (hover:hover) and (pointer:fine) {
  .test-feature-controls button:hover { background: #e1e8e5; }
}

@media (max-width: 960px) {
  .test-feature-layout { grid-template-columns: minmax(220px,.62fr) minmax(0,1.38fr); gap: 4%; }
  .test-feature-stage { min-height: 410px; }
}

@media (max-width: 820px) {
  .test-home #hero-title { max-width: 620px; }
  .test-feature-layout { grid-template-columns: 1fr; gap: 28px; }
  .test-feature-copy > p { max-width: 520px; }
  .test-feature-selector { margin-top: 20px; }
  .test-feature-stage { min-height: 0; }
}

@media (max-width: 600px) {
  .test-home #hero-title { font-size: 36px; line-height: 1.08; }
  .test-feature-section .section-heading { margin-bottom: 28px; }
  .test-feature-copy > p { font-size: 15px; }
  .test-feature-copy > p { margin-bottom: 13px; font-size: 14px; }
  .test-feature-controls { min-height: 48px; grid-template-columns: 38px minmax(0,1fr) 38px; margin-bottom: 9px; }
  .test-feature-controls button { width: 38px; height: 38px; font-size: 18px; }
  .test-feature-controls > span strong { font-size: 12px; }
  .test-feature-controls > span small { font-size: 8px; }
  #test-feature-location .test-feature-stage { min-height: 0; aspect-ratio: 4 / 3; }
  .test-route-finish { width: 31%; }
  .test-workplace-radius { left: 54%; top: 14%; width: 32%; }
  .test-workplace-marker { top: 30%; width: 30px; height: 30px; transform: translate(-15px, -30px); }
  .test-workplace-marker > div { left: 0; top: 36px; bottom: auto; min-width: 122px; padding: 7px 8px; }
  .test-workplace-marker strong { font-size: 11px; }
  .test-workplace-pin { width: 30px; height: 30px; }
  .test-checkin-phone { left: 3%; top: 5%; width: clamp(108px, 33vw, 126px); min-height: 124px; padding: 8px; box-shadow: 5px 5px 0 rgba(21,27,26,.18); }
  .test-checkin-phone .test-phone-brand { min-height: 23px; gap: 5px; padding-bottom: 5px; }
  .test-checkin-phone .test-phone-brand img { width: 18px; height: 18px; }
  .test-checkin-phone .test-phone-brand strong { font-size: 9px; }
  .test-checkin-phone :is(.test-phone-action, .test-phone-confirmed) { left: 8px; right: 8px; top: 37px; bottom: 8px; }
  .test-checkin-phone .test-phone-action small { font-size: 7px; }
  .test-checkin-phone .test-phone-action strong { font-size: 10px; line-height: 1.2; }
  .test-checkin-phone .test-phone-action > span { min-height: 29px; margin-top: 7px; font-size: 10px; box-shadow: 0 3px 0 #0d5378; }
  .test-checkin-phone .test-phone-confirmed > span { width: 32px; height: 32px; }
  .test-checkin-phone .test-phone-confirmed > span i { width: 15px; height: 8px; border-width: 0 0 3px 3px; }
  .test-checkin-phone .test-phone-confirmed strong { margin-top: 4px; font-size: 11px; }
  .test-checkin-phone .test-phone-confirmed small { font-size: 7px; }
  .test-map-user { width: 58px; min-height: 67px; }
  .test-map-user-pin { width: 48px; height: 48px; border-width: 3px; box-shadow: 0 0 0 3px #176f9d, 0 6px 14px rgba(24,55,68,.2); }
  .test-map-user-pin::after { bottom: -9px; width: 16px; height: 16px; }
  .test-map-user > strong { left: 24px; top: 57px; min-width: 54px; padding: 3px 5px; font-size: 8px; }
  .test-scene-status { left: 10px; right: 10px; bottom: 9px; font-size: 7px; }

  .test-workplace-id-stage { min-height: 0; }
  .test-wid-window { left: 5%; top: 13%; width: 31%; height: 31%; box-shadow: inset 0 0 0 5px #f5f1ea, 4px 4px 0 rgba(47,62,67,.14); }
  .test-wid-window::before { width: 5px; }
  .test-wid-window::after { height: 5px; }
  .test-wid-menu { right: 5%; top: 13%; width: 30%; height: 22%; gap: 6px 8px; padding: 7px 9px; }
  .test-wid-menu strong { font-size: 8px; }
  .test-wid-shelf { right: 4%; top: 42%; width: 33%; }
  .test-wid-plant { left: 7%; bottom: 20%; width: 17%; height: 23%; }
  .test-wid-counter { left: 15%; height: 23%; }
  .test-wid-person { left: 49%; bottom: 14%; width: 25%; }
  .test-wid-camera { inset: 4%; }
  .test-wid-corner { width: 25px; height: 25px; }
  .test-wid-anchor { min-width: 38px; padding: 3px 4px; font-size: 6px; }
  .test-wid-anchor.is-menu { right: 2%; top: 10%; }
  .test-wid-anchor.is-shelf { right: 2%; top: 43%; }
  .test-wid-anchor.is-counter { right: 18%; bottom: 4%; }
  .test-wid-phase { left: 4%; top: 5%; min-width: 146px; padding: 8px 9px; }
  .test-wid-phase strong,
  .test-wid-verify-phase > strong { font-size: 11px; }
  .test-wid-captures { gap: 3px; margin-top: 7px; }
  .test-wid-captures i { height: 4px; }
  .test-wid-camera-label { right: 4%; top: 4%; padding: 6px 7px; font-size: 8px; }
  .test-wid-saved,
  .test-wid-approved { min-width: 0; width: min(78%, 250px); gap: 8px; padding: 10px 11px; }
  .test-wid-saved > span,
  .test-wid-approved > span { width: 34px; height: 34px; }
  .test-wid-saved strong,
  .test-wid-approved strong { font-size: 11px; }
  .test-wid-wrong-scene img { left: 47%; bottom: 15%; width: 26%; }
  .test-wid-wrong-scene > div:last-child { left: 5%; right: auto; bottom: 5%; padding: 8px 10px; }
  .test-wid-wrong-scene strong { font-size: 11px; }
  .test-wid-verify-phase { left: 4%; bottom: 4%; min-width: 172px; padding: 8px 10px; }
  .test-wid-check { gap: 5px; margin-top: 5px; font-size: 8px; }
  .test-wid-check i { width: 11px; height: 6px; border-width: 0 0 2px 2px; }

  @keyframes testMapJourney {
    0% { left: 2%; top: 62%; opacity: 0; }
    5%, 8% { left: 2%; top: 62%; opacity: 1; }
    28% { left: 32%; top: 62%; opacity: 1; }
    40% { left: 32%; top: 15%; opacity: 1; }
    52%, 92% { left: 50%; top: 15%; opacity: 1; }
    97%, 100% { left: 54%; top: 34%; opacity: 0; }
  }
}

@media (max-width: 380px) {
  .test-home #hero-title { font-size: 33px; }
  .test-feature-stage { min-height: 0; }
  .test-checkin-phone { width: clamp(104px, 32vw, 116px); min-height: 120px; }
  .test-workplace-marker { left: 70%; }
  .test-workplace-marker > div { min-width: 110px; }
  .test-wid-phase { min-width: 136px; }
  .test-wid-person { width: 27%; }
  .test-wid-camera-label span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .test-feature-stage.is-playing :is(.test-map-user, .test-map-user-pin, .test-workplace-radius, .test-route-start, .test-route-turn, .test-route-finish, .test-checkin-phone, .test-phone-action, .test-phone-action > span, .test-phone-confirmed, .test-phone-confirmed > span) {
    animation: none !important;
  }
  .test-map-user { left: 60%; top: 34%; opacity: 1; }
  .test-checkin-phone, .test-phone-confirmed { opacity: 1; transform: none; }
  .test-phone-action { opacity: 0; }
  .test-phone-confirmed > span { transform: scale(1); }
  .test-workplace-radius { opacity: .4; transform: scale(1); }
  .test-route-start, .test-route-finish { transform: scaleX(1); }
  .test-route-turn { transform: scaleY(1); }
  .test-workplace-id-stage.is-playing :is(.test-wid-enrol-phase,.test-wid-scan-line,.test-wid-anchor,.test-wid-face-frame,.test-wid-captures i,.test-wid-saved,.test-wid-wrong-scene,.test-wid-verify-phase,.test-wid-check i,.test-wid-approved,.test-wid-camera) { animation: none !important; }
  .test-wid-enrol-phase,
  .test-wid-saved,
  .test-wid-wrong-scene,
  .test-wid-verify-phase { display: none; }
  .test-wid-approved { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  .test-wid-face-frame { opacity: 1; box-shadow: inset 3px 0 #1c9b63,inset -3px 0 #1c9b63,inset 0 3px #1c9b63,inset 0 -3px #1c9b63; }
  .test-wid-camera { box-shadow: inset 0 0 0 3px #1c9b63; }
}

/* Real-camera Workplace ID sequence. Kept after the original prototype rules
   so the photo-based scene remains isolated while /test is being evaluated. */
.test-workplace-id-stage { background: #141918; }

.test-wid-photo {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  background: #141918;
}

.test-wid-photo img { width: 100%; height: 100%; display: block; object-fit: cover; }
.test-wid-photo::after { content: ""; position: absolute; z-index: 2; inset: 0; background: rgba(7,12,11,.08); }
.test-wid-photo-wrong { opacity: 1; }

.test-wid-background-check {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  top: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 22% 72% at 54% 55%, transparent 0 96%, #000 100%);
  mask-image: radial-gradient(ellipse 22% 72% at 54% 55%, transparent 0 96%, #000 100%);
}

.test-wid-photo-wrong .test-wid-background-check { background: rgba(201,55,48,.52); box-shadow: 0 3px 0 rgba(201,55,48,.9); }
.test-wid-photo-workplace .test-wid-background-check { background: rgba(24,153,92,.43); box-shadow: 0 3px 0 rgba(24,153,92,.9); }

.test-wid-camera {
  z-index: 5;
  inset: 4%;
  box-shadow: none;
}

.test-wid-scan-line {
  left: 1%;
  right: 1%;
  top: 8%;
  height: 3px;
  background: #70c0f0;
  box-shadow: 0 0 16px rgba(112,192,240,.95);
}

.test-wid-face-frame {
  position: absolute;
  left: 39%;
  top: 7%;
  width: 27%;
  height: 57%;
  opacity: 0;
  box-shadow: inset 3px 0 #70c0f0,inset -3px 0 #70c0f0,inset 0 3px #70c0f0,inset 0 -3px #70c0f0;
}

.test-wid-attempt {
  position: absolute;
  z-index: 8;
  left: 5%;
  top: 7%;
  min-width: 190px;
  display: grid;
  padding: 10px 12px;
  opacity: 0;
  background: rgba(255,255,255,.94);
  color: #17201d;
  box-shadow: 6px 6px 0 rgba(17,28,25,.2);
}

.test-wid-attempt small,
.test-wid-result small { color: #176f9d; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.test-wid-attempt strong,
.test-wid-result strong { margin-top: 2px; font-family: "Manrope",Arial,sans-serif; font-size: 14px; }
.test-wid-attempt-wrong { opacity: 1; }

.test-wid-result {
  position: absolute;
  z-index: 11;
  left: 50%;
  top: 50%;
  min-width: 255px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 15px;
  opacity: 0;
  background: #fff;
  color: #17201d;
  box-shadow: 8px 8px 0 rgba(17,28,25,.23);
  transform: translate(-50%,-44%) scale(.96);
}

.test-wid-result > span { width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; background: #1c9b63; color: #fff; font-family: Arial,sans-serif; font-size: 29px; line-height: 1; }
.test-wid-result > div { display: grid; }
.test-wid-rejected > span { background: #c9473f; }
.test-wid-rejected small { color: #a53731; }

.test-wid-result > span i,
.test-wid-check i { width: 17px; height: 9px; border-left: 3px solid #fff; border-bottom: 3px solid #fff; transform: translateY(-2px) rotate(-45deg); }

.test-wid-checks {
  position: absolute;
  z-index: 9;
  left: 5%;
  bottom: 6%;
  display: grid;
  gap: 7px;
  opacity: 0;
}

.test-wid-check {
  min-width: 146px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 10px;
  background: rgba(255,255,255,.94);
  color: #24312d;
  font-size: 10px;
  font-weight: 800;
  box-shadow: 4px 4px 0 rgba(17,28,25,.18);
}

.test-wid-check i { width: 14px; height: 8px; opacity: 0; border-color: #1c9b63; }
.test-wid-camera-label { right: 5%; }

.test-workplace-id-stage.is-playing .test-wid-photo-wrong { animation: testWidWrongPhoto 14s steps(1,end) infinite; }
.test-workplace-id-stage.is-playing .test-wid-photo-workplace { animation: testWidWorkplacePhoto 14s steps(1,end) infinite; }
.test-workplace-id-stage.is-playing .test-wid-photo-wrong .test-wid-background-check { animation: testWidWrongBackground 14s ease-in-out infinite; }
.test-workplace-id-stage.is-playing .test-wid-photo-workplace .test-wid-background-check { animation: testWidWorkplaceBackground 14s ease-in-out infinite; }
.test-workplace-id-stage.is-playing .test-wid-attempt-wrong { animation: testWidWrongAttempt 14s steps(1,end) infinite; }
.test-workplace-id-stage.is-playing .test-wid-attempt-workplace { animation: testWidWorkplaceAttempt 14s steps(1,end) infinite; }
.test-workplace-id-stage.is-playing .test-wid-scan-line { animation: testWidPhotoScan 14s ease-in-out infinite; }
.test-workplace-id-stage.is-playing .test-wid-face-frame { animation: testWidPhotoFace 14s steps(1,end) infinite; }
.test-workplace-id-stage.is-playing .test-wid-rejected { animation: testWidRejected 14s ease infinite; }
.test-workplace-id-stage.is-playing .test-wid-checks { animation: testWidChecks 14s steps(1,end) infinite; }
.test-workplace-id-stage.is-playing .test-wid-check.is-face i { animation: testWidCheckFace 14s steps(1,end) infinite; }
.test-workplace-id-stage.is-playing .test-wid-check.is-place i { animation: testWidCheckPlace 14s steps(1,end) infinite; }
.test-workplace-id-stage.is-playing .test-wid-approved { animation: testWidApproved 14s ease infinite; }
.test-workplace-id-stage.is-playing .test-wid-camera { animation: testWidPhotoFrame 14s steps(1,end) infinite; }

.test-workplace-id-stage.is-paused :is(.test-wid-photo,.test-wid-background-check,.test-wid-attempt,.test-wid-scan-line,.test-wid-face-frame,.test-wid-result,.test-wid-checks,.test-wid-check i,.test-wid-camera) { animation-play-state: paused; }

@keyframes testWidWrongPhoto { 0%,42% { opacity: 1; } 43%,100% { opacity: 0; } }
@keyframes testWidWorkplacePhoto { 0%,42% { opacity: 0; } 43%,100% { opacity: 1; } }
@keyframes testWidWrongBackground { 0%,20% { height: 0; opacity: 0; } 21% { height: 0; opacity: 1; } 26%,28% { height: 100%; opacity: 1; } 30%,100% { height: 100%; opacity: 0; } }
@keyframes testWidWorkplaceBackground { 0%,64% { height: 0; opacity: 0; } 65% { height: 0; opacity: 1; } 71%,81% { height: 100%; opacity: 1; } 84%,100% { height: 100%; opacity: 0; } }
@keyframes testWidWrongAttempt { 0%,20% { opacity: 1; } 21%,100% { opacity: 0; } }
@keyframes testWidWorkplaceAttempt { 0%,42% { opacity: 0; } 43%,66% { opacity: 1; } 67%,100% { opacity: 0; } }
@keyframes testWidPhotoScan { 0%,3% { top: 8%; opacity: 0; } 6% { opacity: 1; } 20% { top: 90%; opacity: 1; } 22%,46% { opacity: 0; } 49% { top: 8%; opacity: 1; } 64% { top: 90%; opacity: 1; } 67%,100% { opacity: 0; } }
@keyframes testWidPhotoFace { 0%,4% { opacity: 0; } 7%,20% { opacity: 1; } 22%,47% { opacity: 0; } 50%,65% { opacity: 1; box-shadow: inset 3px 0 #70c0f0,inset -3px 0 #70c0f0,inset 0 3px #70c0f0,inset 0 -3px #70c0f0; } 68%,84% { opacity: 1; box-shadow: inset 3px 0 #1c9b63,inset -3px 0 #1c9b63,inset 0 3px #1c9b63,inset 0 -3px #1c9b63; } 87%,100% { opacity: 0; } }
@keyframes testWidRejected { 0%,31% { opacity: 0; transform: translate(-50%,-44%) scale(.96); } 34%,39% { opacity: 1; transform: translate(-50%,-50%) scale(1); } 41%,100% { opacity: 0; transform: translate(-50%,-50%) scale(1); } }
@keyframes testWidChecks { 0%,72% { opacity: 0; } 75%,84% { opacity: 1; } 87%,100% { opacity: 0; } }
@keyframes testWidCheckFace { 0%,74% { opacity: 0; } 75%,100% { opacity: 1; } }
@keyframes testWidCheckPlace { 0%,79% { opacity: 0; } 80%,100% { opacity: 1; } }
@keyframes testWidApproved { 0%,83% { opacity: 0; transform: translate(-50%,-44%) scale(.96); } 87%,96% { opacity: 1; transform: translate(-50%,-50%) scale(1); } 99%,100% { opacity: 0; } }
@keyframes testWidPhotoFrame { 0%,20% { box-shadow: none; } 21%,40% { box-shadow: inset 0 0 0 4px #c9473f; } 42%,66% { box-shadow: none; } 67%,97% { box-shadow: inset 0 0 0 4px #1c9b63; } 99%,100% { box-shadow: none; } }

@media (max-width: 600px) {
  .test-workplace-id-stage { min-height: 0; aspect-ratio: 4 / 3; }
  .test-wid-photo img { object-position: center center; }
  .test-wid-camera { inset: 4%; }
  .test-wid-face-frame { left: 34%; top: 6%; width: 35%; height: 62%; }
  .test-wid-attempt { left: 4%; top: 5%; min-width: 142px; padding: 7px 9px; }
  .test-wid-attempt strong,
  .test-wid-result strong { font-size: 10px; }
  .test-wid-result { min-width: 0; width: min(76%, 236px); gap: 8px; padding: 9px 10px; }
  .test-wid-result > span { width: 32px; height: 32px; font-size: 23px; }
  .test-wid-result > span i { width: 14px; height: 7px; border-width: 0 0 3px 3px; }
  .test-wid-checks { left: 4%; bottom: 4%; gap: 5px; }
  .test-wid-check { min-width: 128px; gap: 6px; padding: 6px 8px; font-size: 8px; }
  .test-wid-camera-label { right: 4%; top: 4%; padding: 5px 7px; }
}

@media (max-width: 380px) {
  .test-wid-camera-label span { display: inline; }
  .test-wid-camera-label { right: 4%; font-size: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  .test-feature-layout.is-running .test-feature-controls::after { animation: none; transform: scaleX(1); }
  .test-workplace-id-stage.is-playing :is(.test-wid-photo,.test-wid-attempt,.test-wid-scan-line,.test-wid-face-frame,.test-wid-result,.test-wid-checks,.test-wid-check i,.test-wid-camera) { animation: none !important; }
  .test-wid-photo-wrong,
  .test-wid-attempt,
  .test-wid-rejected,
  .test-wid-checks { display: none; }
  .test-wid-photo-workplace { opacity: 1; }
  .test-wid-approved { display: flex; opacity: 1; transform: translate(-50%,-50%) scale(1); }
  .test-wid-camera { box-shadow: inset 0 0 0 4px #1c9b63; }
}

/* Final feature presentation: selector on desktop, complete feature sections on mobile. */
.test-feature-layout {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(250px,.56fr) minmax(0,1.44fr);
  gap: clamp(32px,6vw,86px);
  align-items: center;
}

.test-feature-copy > p { margin-bottom: 24px; }

.test-feature-selector {
  display: grid;
  gap: 8px;
}

.test-feature-selector button {
  width: 100%;
  min-height: 76px;
  display: grid;
  grid-template-columns: 34px minmax(0,1fr);
  gap: 13px;
  align-items: center;
  padding: 13px 15px;
  border: 0;
  background: transparent;
  color: #65727a;
  text-align: left;
  cursor: pointer;
  transition: color .2s ease, background .2s ease, transform .2s ease;
}

.test-feature-selector button > span {
  font-family: "Manrope",Arial,sans-serif;
  font-size: 11px;
  font-weight: 800;
}

.test-feature-selector button :is(strong,small) { display: block; }
.test-feature-selector button strong { color: inherit; font-family: "Manrope",Arial,sans-serif; font-size: 14px; font-weight: 800; }
.test-feature-selector button small { margin-top: 4px; color: #7a898f; font-size: 10px; line-height: 1.4; }
.test-feature-selector button.is-active { background: #eef3f1; color: #142d3a; transform: translateX(6px); }
.test-feature-selector button.is-active > span { color: #147aac; }
.test-feature-mobile-heading { display: none; }
.test-feature-mobile-controls { display: none; }

.test-metrix-chat-stage,
.test-metrix-staff-stage {
  display: grid;
  grid-template-columns: 52px minmax(0,1fr);
  min-height: 470px;
  background: #111313;
  color: #f7f8f8;
  box-shadow: 0 22px 54px rgba(15,25,29,.2);
}

.test-mx-rail {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 17px 8px;
  background: #090a0a;
}

.test-mx-rail img { width: 29px; height: 29px; object-fit: contain; filter: brightness(0) invert(1); }

.test-mx-chat-shell,
.test-mx-staff-shell { min-width: 0; overflow: hidden; }

.test-mx-staff-product {
  position: relative;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  background: #111313;
}

.test-metrix-staff-stage { min-height: 470px; }

.test-metrix-staff-stage .home-mx-head { height: 52px; }
.test-metrix-staff-stage .home-mx-staff-view {
  height: calc(100% - 52px);
  display: flex;
  flex-direction: column;
  padding: 8px 10px 10px;
}
.test-metrix-staff-stage .home-mx-staff-head { min-height: 38px; flex: 0 0 38px; }
.test-metrix-staff-stage .home-mx-staff-list {
  min-height: 0;
  display: grid;
  grid-template-rows: repeat(6,minmax(0,1fr));
  flex: 1;
}
.test-metrix-staff-stage .home-mx-staff-row { min-height: 0; }
.test-metrix-staff-stage .home-mx-detail { inset: 52px 0 0; padding: 16px; }
.test-metrix-staff-stage .home-mx-detail-dialog { padding: 16px; }
.test-metrix-staff-stage .home-mx-detail-person { padding-bottom: 11px; }
.test-metrix-staff-stage .home-mx-detail-metrics { margin: 10px 0; }
.test-metrix-staff-stage .home-mx-detail-metrics > span { padding: 7px; }
.test-metrix-staff-stage .home-mx-detail-bars { gap: 6px; }

.test-mx-chat-shell > header {
  height: 62px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 21px;
  background: #151818;
}

.test-mx-chat-shell > header div { min-width: 0; flex: 1; }
.test-mx-chat-shell > header :is(strong,small) { display: block; }
.test-mx-chat-shell > header strong { font-size: 12px; }
.test-mx-chat-shell > header small { margin-top: 2px; color: #8f9998; font-size: 8px; }
.test-mx-chat-shell > header > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50% !important; background: #e6ece9; color: #17201d; font-size: 10px; font-weight: 800; }

.test-mx-chat-log {
  height: calc(100% - 118px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 17px 7% 9px;
  overflow: hidden;
}

.test-mx-message { display: flex; gap: 9px; opacity: 0; transform: translateY(7px); }
.test-mx-message.is-user { align-self: flex-end; display: block; max-width: 68%; padding: 9px 12px; background: #292d2c; }
.test-mx-message.is-user small { display: block; margin-bottom: 3px; color: #aab1af; font-size: 7px; font-weight: 800; text-transform: uppercase; }
.test-mx-message p { margin: 0; font-size: 10px; line-height: 1.45; }
.test-mx-message.is-ai { align-self: flex-start; width: min(88%,450px); }
.test-mx-message.is-ai > img { width: 22px; height: 22px; flex: 0 0 auto; object-fit: contain; filter: brightness(0) invert(1); }
.test-mx-message.is-ai > div { min-width: 0; }
.test-mx-message.is-ai small { display: block; margin-bottom: 4px; color: #aab1af; font-size: 8px; font-weight: 800; }
.test-mx-message.is-ai p { display: none; color: #e7eae9; }
.test-mx-typing { height: 25px; display: flex; align-items: center; gap: 4px; }
.test-mx-typing i { width: 4px; height: 4px; border-radius: 50% !important; background: #98a19e; animation: testMxDot .8s ease-in-out infinite alternate; }
.test-mx-typing i:nth-child(2) { animation-delay: .16s; }
.test-mx-typing i:nth-child(3) { animation-delay: .32s; }

.test-mx-composer {
  height: 42px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 7% 14px;
  padding: 0 8px 0 13px;
  background: #242827;
  color: #909997;
  font-size: 9px;
}
.test-mx-composer span { flex: 1; }
.test-mx-composer b { width: 27px; height: 27px; display: grid; place-items: center; background: #f0f3f2; color: #111; font-size: 14px; }

.test-metrix-chat-stage.is-playing .test-mx-message.is-user.is-first { animation: testMxMessageOne 12s ease infinite; }
.test-metrix-chat-stage.is-playing .test-mx-message.is-ai.is-first { animation: testMxMessageTwo 12s ease infinite; }
.test-metrix-chat-stage.is-playing .test-mx-message.is-ai.is-first .test-mx-typing { animation: testMxTypingOne 12s steps(1,end) infinite; }
.test-metrix-chat-stage.is-playing .test-mx-message.is-ai.is-first p { display: block; animation: testMxAnswerOne 12s steps(1,end) infinite; }
.test-metrix-chat-stage.is-playing .test-mx-message.is-user.is-second { animation: testMxMessageThree 12s ease infinite; }
.test-metrix-chat-stage.is-playing .test-mx-message.is-ai.is-second { animation: testMxMessageFour 12s ease infinite; }
.test-metrix-chat-stage.is-playing .test-mx-message.is-ai.is-second .test-mx-typing { animation: testMxTypingTwo 12s steps(1,end) infinite; }
.test-metrix-chat-stage.is-playing .test-mx-message.is-ai.is-second p { display: block; animation: testMxAnswerTwo 12s steps(1,end) infinite; }

.test-mx-staff-shell { position: relative; padding: 20px 22px; background: #131515; }
.test-mx-staff-shell > header { display: flex; align-items: flex-end; justify-content: space-between; padding-bottom: 15px; }
.test-mx-staff-shell > header :is(strong,small) { display: block; }
.test-mx-staff-shell > header small { color: #899391; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.test-mx-staff-shell > header strong { margin-top: 3px; font-size: 17px; }
.test-mx-staff-shell > header > span { color: #9ca5a3; font-size: 9px; }
.test-mx-staff-list { width: 57%; display: grid; gap: 7px; }
.test-mx-staff-row { min-height: 67px; display: grid; grid-template-columns: 25px 42px minmax(0,1fr) 35px; gap: 10px; align-items: center; padding: 8px 10px; background: #1c1f1e; }
.test-mx-staff-row.is-featured { background: #e9eeeb; color: #101716; }
.test-mx-staff-row > b { color: #78817f; font-size: 9px; }
.test-mx-staff-row > img { width: 42px; height: 42px; border-radius: 50% !important; object-fit: cover; }
.test-mx-staff-row span { min-width: 0; }
.test-mx-staff-row span :is(strong,small) { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.test-mx-staff-row span strong { font-size: 9px; }
.test-mx-staff-row span small { margin-top: 3px; color: #8e9896; font-size: 7px; }
.test-mx-staff-row.is-featured span small { color: #64706d; }
.test-mx-staff-row > em { font-style: normal; font-size: 15px; font-weight: 800; text-align: right; }

.test-mx-staff-detail { position: absolute; right: 22px; top: 78px; width: 37%; padding: 16px; background: #262a29; opacity: 0; transform: translateX(16px); }
.test-mx-staff-detail > div:first-child { display: grid; grid-template-columns: 44px minmax(0,1fr) 34px; gap: 9px; align-items: center; }
.test-mx-staff-detail img { width: 44px; height: 44px; border-radius: 50% !important; object-fit: cover; }
.test-mx-staff-detail span :is(strong,small) { display: block; }
.test-mx-staff-detail span small { color: #9da6a4; font-size: 7px; }
.test-mx-staff-detail span strong { margin-top: 3px; font-size: 9px; }
.test-mx-staff-detail > div:first-child > b { font-size: 20px; text-align: right; }
.test-mx-staff-detail dl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 16px 0 0; }
.test-mx-staff-detail dl > div { padding: 9px; background: #1b1e1d; }
.test-mx-staff-detail :is(dt,dd) { margin: 0; }
.test-mx-staff-detail dt { color: #8d9694; font-size: 7px; }
.test-mx-staff-detail dd { margin-top: 3px; font-size: 11px; font-weight: 800; }
.test-metrix-staff-stage.is-playing .test-mx-staff-row.is-featured { animation: testMxStaffSelect 10s ease infinite; }
.test-metrix-staff-stage.is-playing .test-mx-staff-detail { animation: testMxStaffDetail 10s ease infinite; }

@keyframes testMxDot { to { opacity: .25; transform: translateY(-2px); } }
@keyframes testMxMessageOne { 0%,5% { opacity: 0; transform: translateY(7px); } 10%,100% { opacity: 1; transform: translateY(0); } }
@keyframes testMxMessageTwo { 0%,18% { opacity: 0; transform: translateY(7px); } 23%,100% { opacity: 1; transform: translateY(0); } }
@keyframes testMxTypingOne { 0%,34% { display: flex; } 35%,100% { display: none; } }
@keyframes testMxAnswerOne { 0%,34% { visibility: hidden; } 35%,100% { visibility: visible; } }
@keyframes testMxMessageThree { 0%,51% { opacity: 0; transform: translateY(7px); } 56%,100% { opacity: 1; transform: translateY(0); } }
@keyframes testMxMessageFour { 0%,65% { opacity: 0; transform: translateY(7px); } 70%,100% { opacity: 1; transform: translateY(0); } }
@keyframes testMxTypingTwo { 0%,82% { display: flex; } 83%,100% { display: none; } }
@keyframes testMxAnswerTwo { 0%,82% { visibility: hidden; } 83%,100% { visibility: visible; } }
@keyframes testMxStaffSelect { 0%,18% { transform: none; } 25%,78% { transform: translateX(4px); } 86%,100% { transform: none; } }
@keyframes testMxStaffDetail { 0%,20% { opacity: 0; transform: translateX(16px); } 29%,82% { opacity: 1; transform: translateX(0); } 90%,100% { opacity: 0; transform: translateX(8px); } }

@media (hover:hover) and (pointer:fine) {
  .test-feature-selector button:hover { background: #f3f6f5; color: #243d49; }
  .test-feature-selector button.is-active:hover { background: #e7efec; }
}

@media (max-width: 960px) and (min-width: 821px) {
  .test-feature-layout { grid-template-columns: minmax(220px,.6fr) minmax(0,1.4fr); gap: 30px; }
  .test-feature-selector button { min-height: 68px; }
  .test-metrix-chat-stage { min-height: 410px; }
  .test-metrix-staff-stage { min-height: 410px; }
}

@media (max-width: 820px) {
  .test-feature-layout { display: block; width: 100%; }
  .test-feature-copy { display: none; }
  .test-feature-mobile-heading { display: none; }
  .test-feature-mobile-controls {
    min-height: 48px;
    display: grid;
    grid-template-columns: 38px minmax(0,1fr) 38px;
    gap: 8px;
    align-items: center;
    margin-bottom: 10px;
    background: #f1f4f3;
  }
  .test-feature-mobile-controls button {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ink);
    font-size: 18px;
    cursor: pointer;
  }
  .test-feature-mobile-controls > span {
    min-width: 0;
    overflow: hidden;
    color: var(--ink);
    font-family: "Manrope",Arial,sans-serif;
    font-size: 12px;
    font-weight: 800;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .test-metrix-chat-stage,
  .test-metrix-staff-stage { grid-template-columns: 39px minmax(0,1fr); }
  .test-metrix-chat-stage { min-height: 0; aspect-ratio: 4 / 3; }
  .test-metrix-staff-stage { min-height: 0; aspect-ratio: 4 / 3; }
  .test-metrix-staff-stage .home-mx-head { height: 42px; grid-template-columns: 25px minmax(0,1fr) 25px; gap: 6px; padding: 0 7px; }
  .test-metrix-staff-stage .home-mx-mobile-menu { width: 25px; height: 25px; }
  .test-metrix-staff-stage .home-mx-mobile-avatar { width: 24px; height: 24px; }
  .test-metrix-staff-stage .home-mx-head strong { font-size: 9px; }
  .test-metrix-staff-stage .home-mx-head small { font-size: 6px; }
  .test-metrix-staff-stage .home-mx-staff-view { height: calc(100% - 42px); padding: 4px 6px 5px; }
  .test-metrix-staff-stage .home-mx-staff-head { min-height: 28px; flex-basis: 28px; }
  .test-metrix-staff-stage .home-mx-staff-head strong { font-size: 8px; }
  .test-metrix-staff-stage .home-mx-staff-head small,
  .test-metrix-staff-stage .home-mx-staff-head > span { font-size: 5px; }
  .test-metrix-staff-stage .home-mx-staff-row {
    min-height: 0;
    grid-template-columns: 10px 23px minmax(0,1fr) 27px;
    grid-template-rows: minmax(16px,1fr) 10px;
    gap: 0 4px;
    padding: 1px;
  }
  .test-metrix-staff-stage .home-mx-photo { width: 23px; height: 23px; }
  .test-metrix-staff-stage .home-mx-person strong { font-size: 6px; }
  .test-metrix-staff-stage .home-mx-person small { font-size: 5px; }
  .test-metrix-staff-stage .home-mx-row-metrics { gap: 2px; }
  .test-metrix-staff-stage .home-mx-row-metrics b { font-size: 5px; }
  .test-metrix-staff-stage .home-mx-row-metrics small { font-size: 4px; }
  .test-metrix-staff-stage .home-mx-score b { font-size: 9px; }
  .test-metrix-staff-stage .home-mx-score small { font-size: 4px; }
  .test-metrix-staff-stage .home-mx-detail { inset: 42px 0 0; padding: 5px; }
  .test-metrix-staff-stage .home-mx-detail-close { top: 6px; right: 6px; width: 25px; height: 25px; font-size: 16px; }
  .test-metrix-staff-stage .home-mx-detail-dialog { padding: 8px; }
  .test-metrix-staff-stage .home-mx-detail-person { grid-template-columns: 34px minmax(0,1fr) auto; gap: 6px; padding: 5px 0 7px; }
  .test-metrix-staff-stage .home-mx-detail-person .home-mx-photo { width: 34px; height: 34px; }
  .test-metrix-staff-stage .home-mx-detail-person strong { font-size: 8px; }
  .test-metrix-staff-stage .home-mx-detail-score b { font-size: 15px; }
  .test-metrix-staff-stage .home-mx-detail-metrics { margin: 6px 0; }
  .test-metrix-staff-stage .home-mx-detail-metrics > span { padding: 4px; }
  .test-metrix-staff-stage .home-mx-detail-metrics small { font-size: 5px; }
  .test-metrix-staff-stage .home-mx-detail-metrics b { margin-top: 2px; font-size: 7px; }
  .test-metrix-staff-stage .home-mx-detail-bars { gap: 4px; }
  .test-metrix-staff-stage .home-mx-detail-bars > div { grid-template-columns: 77px minmax(0,1fr); gap: 5px; }
  .test-metrix-staff-stage .home-mx-detail-bars span { font-size: 5px; }
  .test-mx-rail { padding: 10px 6px; }
  .test-mx-rail img { width: 24px; height: 24px; }
  .test-mx-chat-shell > header { height: 45px; padding: 0 11px; }
  .test-mx-chat-shell > header strong { font-size: 9px; }
  .test-mx-chat-shell > header small { font-size: 6px; }
  .test-mx-chat-shell > header > span { width: 23px; height: 23px; font-size: 8px; }
  .test-mx-chat-log { height: calc(100% - 86px); gap: 6px; padding: 9px 5% 6px; }
  .test-mx-message { gap: 6px; }
  .test-mx-message.is-user { max-width: 78%; padding: 6px 8px; }
  .test-mx-message.is-user small { margin-bottom: 2px; font-size: 5px; }
  .test-mx-message p { font-size: 7px; line-height: 1.35; }
  .test-mx-message.is-ai { width: 94%; }
  .test-mx-message.is-ai > img { width: 17px; height: 17px; }
  .test-mx-message.is-ai small { margin-bottom: 2px; font-size: 6px; }
  .test-mx-typing { height: 17px; }
  .test-mx-composer { height: 31px; margin: 0 5% 10px; padding-left: 9px; font-size: 7px; }
  .test-mx-composer b { width: 22px; height: 22px; }
  .test-mx-staff-shell { padding: 12px 11px; }
  .test-mx-staff-shell > header { padding-bottom: 9px; }
  .test-mx-staff-shell > header small { font-size: 6px; }
  .test-mx-staff-shell > header strong { font-size: 12px; }
  .test-mx-staff-shell > header > span { font-size: 7px; }
  .test-mx-staff-list { width: 59%; gap: 4px; }
  .test-mx-staff-row { min-height: 43px; grid-template-columns: 15px 28px minmax(0,1fr) 24px; gap: 5px; padding: 5px; }
  .test-mx-staff-row > b { font-size: 6px; }
  .test-mx-staff-row > img { width: 28px; height: 28px; }
  .test-mx-staff-row span strong { font-size: 6px; }
  .test-mx-staff-row span small { font-size: 5px; }
  .test-mx-staff-row > em { font-size: 10px; }
  .test-mx-staff-detail { right: 11px; top: 50px; width: 37%; padding: 9px; }
  .test-mx-staff-detail > div:first-child { grid-template-columns: 29px minmax(0,1fr); gap: 6px; }
  .test-mx-staff-detail img { width: 29px; height: 29px; }
  .test-mx-staff-detail span small { font-size: 5px; }
  .test-mx-staff-detail span strong { font-size: 6px; }
  .test-mx-staff-detail > div:first-child > b { grid-column: 1 / -1; font-size: 15px; text-align: left; }
  .test-mx-staff-detail dl { gap: 4px; margin-top: 8px; }
  .test-mx-staff-detail dl > div { padding: 5px; }
  .test-mx-staff-detail dt { font-size: 5px; }
  .test-mx-staff-detail dd { font-size: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  .test-metrix-chat-stage.is-playing .test-mx-message { opacity: 1; transform: none; animation: none !important; }
  .test-metrix-chat-stage.is-playing .test-mx-typing { display: none; animation: none !important; }
  .test-metrix-chat-stage.is-playing .test-mx-message.is-ai p { visibility: visible; animation: none !important; }
  .test-metrix-staff-stage.is-playing .test-mx-staff-detail { opacity: 1; transform: none; animation: none !important; }
}