.product-lab {
  background: #0d233c;
  position: relative;
  overflow: hidden;
  color: #fff;
}
.product-lab:before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(#a0c0ef05 1px, transparent 1px),
    linear-gradient(90deg, #a0c0ef05 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}
.product-lab > .container {
  position: relative;
}
.lab-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 60px;
  margin-bottom: 34px;
}
.lab-heading h2 {
  font-size: 37px;
  letter-spacing: -1.6px;
  margin-bottom: 0;
}
.lab-heading h2 > span {
  color: #7ea8d3;
}
.lab-heading .eyebrow {
  color: #7fa9d3;
  font-size: 8px;
  letter-spacing: 1.4px;
  margin-bottom: 20px;
}
.lab-heading .status-dot {
  background: #71b4a5;
  box-shadow: 0 0 0 4px #71b4a51a;
}
.lab-intro {
  max-width: 290px;
  flex-shrink: 0;
}
.lab-intro > p {
  font-size: 12px;
  line-height: 1.9;
  color: #9cb4d0;
  margin-bottom: 13px;
}
.lab-intro > button {
  background: #1b3958;
  border: 1px solid #6485ad42;
  border-radius: 5px;
  color: #c6d8ed;
  padding: 8px 11px;
  font-size: 9px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.lab-intro > button > span {
  font-size: 11px;
  line-height: 1;
}
.lab-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.lab-card {
  background: #fff;
  border: 1px solid #dce7f4;
  border-radius: 12px;
  overflow: hidden;
  min-width: 0;
  display: flex;
  flex-direction: column;
  color: var(--ink);
}
.lab-card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 17px 20px;
  font-size: 8px;
  letter-spacing: 1px;
  color: #8298ae;
  background: #f8fbff;
  border-bottom: 1px solid #e1eaf5;
}
.lab-card-heading > .icon {
  width: 16px;
  height: 16px;
  color: #7d9fc4;
}
.lab-stage {
  height: 280px;
  position: relative;
  overflow: hidden;
  background: #edf4fc;
  border-bottom: 1px solid #e2ebf6;
  flex-shrink: 0;
}
.lab-card-body {
  padding: 25px 25px 21px;
  flex: 1;
}
.lab-card h3 {
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.9px;
  margin-bottom: 15px;
}
.lab-card p {
  font-size: 12px;
  line-height: 1.85;
  color: #7c90a5;
  margin-bottom: 19px;
}
.lab-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 11px 13px;
  min-height: 40px;
  background: #f0f6ff;
  color: #2770cc;
  border: 1px solid #cfe0f7;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 500;
  transition:
    background 0.2s,
    transform 0.2s;
}
.lab-action:hover {
  background: #e1edff;
  transform: translateY(-1px);
}
.lab-action:disabled {
  opacity: 0.7;
  transform: none;
}
.lab-action > .icon {
  width: 15px;
  height: 15px;
}
.lab-example-note {
  display: block;
  font-size: 8px;
  color: #9baaba;
  margin-top: 9px;
  line-height: 1.7;
}
.lab-card .lab-feedback {
  font-size: 10px;
  line-height: 1.8;
  padding: 10px 12px;
  background: #f7f9fd;
  border-left: 2px solid #c5dbf6;
  border-radius: 0 4px 4px 0;
  color: #778fa8;
  margin: 15px 0 0;
  min-height: 56px;
}
.lab-sales-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 25px;
  padding: 17px 0;
  border-top: 1px solid #e3ebf5;
  color: #3d7bc5;
  font-size: 10px;
}
.lab-sales-link > .icon {
  width: 15px;
  height: 15px;
}
.lab-sales-link:hover {
  color: #0753b7;
}
.lab-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  color: #718eaf;
  font-size: 9px;
  margin-top: 24px;
}
.lab-bottom > span,
.lab-bottom > a {
  display: flex;
  align-items: center;
  gap: 9px;
}
.lab-bottom .icon {
  width: 15px;
  height: 15px;
}
.lab-bottom > a {
  color: #9cbfeb;
}
.qr-stage {
  background: radial-gradient(ellipse at 65% 50%, #d7e9fc, #f2f7fd);
}
.qr-physical-label {
  position: absolute;
  left: 8%;
  top: 34%;
  width: 100px;
  padding: 15px;
  background: #fff;
  border: 1px solid #d2e0f0;
  box-shadow: 7px 9px 0 #d8e4f1;
  border-radius: 5px;
  transform: rotate(-8deg);
}
.qr-physical-label > svg {
  display: block;
  fill: none;
  stroke: #255283;
  stroke-width: 1.7;
  width: 58px;
  height: 58px;
  margin: auto;
}
.qr-physical-label > span {
  display: block;
  text-align: center;
  font-size: 7px;
  font-weight: 600;
  letter-spacing: 0.6px;
  margin-top: 12px;
  color: #567797;
}
.qr-physical-label small {
  display: block;
  font-size: 4px;
  color: #8da7bf;
  margin-top: 4px;
  letter-spacing: 0.3px;
}
.qr-physical-label > i {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #b4d0ed;
  right: 7px;
  top: 7px;
  transition:
    background 0.3s,
    box-shadow 0.3s;
}
.phone-frame {
  position: absolute;
  right: 10%;
  top: 7%;
  width: 151px;
  height: 260px;
  background: #fbfdff;
  border: 5px solid #234262;
  border-radius: 24px;
  box-shadow: 12px 14px 25px #23507822;
  transform: rotate(7deg);
  padding: 24px 8px 12px;
  overflow: hidden;
}
.phone-speaker {
  width: 39px;
  height: 4px;
  background: #234262;
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 3px;
}
.phone-header {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 6px;
  color: #637e9c;
  border-bottom: 1px solid #e1eaf6;
  padding-bottom: 7px;
}
.phone-viewfinder {
  position: relative;
  height: 120px;
  margin-top: 12px;
  border-radius: 3px;
  background: #e9f1fa;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    height 0.4s,
    margin-top 0.4s;
}
.phone-code {
  width: 48px;
  height: 48px;
  fill: none;
  stroke: #6892bf;
  stroke-width: 1.4;
  transition: opacity 0.3s;
}
.finder-corner {
  position: absolute;
  width: 12px;
  height: 12px;
  border-color: #75a4da;
  border-style: solid;
  border-width: 0;
}
.top-left {
  top: 7px;
  left: 7px;
  border-top-width: 2px;
  border-left-width: 2px;
}
.top-right {
  top: 7px;
  right: 7px;
  border-top-width: 2px;
  border-right-width: 2px;
}
.bottom-left {
  bottom: 7px;
  left: 7px;
  border-bottom-width: 2px;
  border-left-width: 2px;
}
.bottom-right {
  bottom: 7px;
  right: 7px;
  border-bottom-width: 2px;
  border-right-width: 2px;
}
.phone-scan-beam {
  height: 2px;
  position: absolute;
  left: 5px;
  right: 5px;
  top: 20px;
  background: #4b9aed;
  box-shadow: 0 0 9px 3px #4b9aed38;
  opacity: 0;
}
.scan-message {
  position: absolute;
  bottom: 14px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 5px;
  color: #84a0bd;
}
.phone-result {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 141px;
  padding: 10px 6px;
  border: 1px solid #b3d6e7;
  background: #f5fcfa;
  border-radius: 5px;
  transform: translateY(20px);
  opacity: 0;
  transition:
    transform 0.4s,
    opacity 0.4s;
}
.phone-result-status {
  display: flex;
  gap: 4px;
  align-items: center;
  font-size: 6px;
  color: #45917c;
  margin-bottom: 6px;
}
.phone-result-status > .icon {
  width: 10px;
  height: 10px;
}
.phone-result > strong {
  display: block;
  font-size: 8px;
  font-weight: 600;
  color: #305c7e;
}
.phone-result > span:not(.phone-result-status) {
  display: block;
  font-size: 5px;
  color: #7f9bb0;
  margin-top: 3px;
}
.phone-result > div {
  display: flex;
  gap: 4px;
  margin-top: 7px;
}
.phone-result b {
  font-size: 5px;
  font-weight: 400;
  color: #648b9d;
  padding: 2px 4px;
  background: #e6f3ef;
  border-radius: 2px;
}
.phone-home {
  width: 39px;
  height: 3px;
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  background: #234262;
  border-radius: 3px;
}
.scan-success {
  position: absolute;
  bottom: 23px;
  left: 20%;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #d6eee4;
  color: #3b9478;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(0.5);
  transition:
    opacity 0.3s,
    transform 0.3s;
}
.scan-success > .icon {
  width: 16px;
  height: 16px;
}
.qr-stage[data-scan="scanning"] .phone-scan-beam {
  opacity: 1;
  animation: scan-beam 1.2s ease-in-out infinite;
}
.qr-stage[data-scan="scanning"] .qr-physical-label > i {
  background: #3588e5;
  box-shadow: 0 0 0 4px #3588e522;
}
.qr-stage[data-scan="found"] .phone-viewfinder {
  height: 69px;
  margin-top: 10px;
}
.qr-stage[data-scan="found"] .phone-code {
  width: 30px;
  height: 30px;
}
.qr-stage[data-scan="found"] .scan-message {
  display: none;
}
.qr-stage[data-scan="found"] .phone-result {
  opacity: 1;
  transform: none;
}
.qr-stage[data-scan="found"] .qr-physical-label > i {
  background: #389e7b;
  box-shadow: 0 0 0 4px #389e7b22;
}
.qr-stage[data-scan="found"] .scan-success {
  opacity: 1;
  transform: scale(1);
}
.revision-stage {
  background: radial-gradient(ellipse at 60% 50%, #dceafd, #f2f6fc);
}
.revision-sheet {
  position: absolute;
  width: 213px;
  height: 221px;
  left: 50%;
  top: 33px;
  margin-left: -106px;
  background: #fff;
  border: 1px solid #cbdced;
  border-radius: 5px;
  box-shadow: 0 12px 25px #254f7a17;
}
.sheet-back {
  transform: translateX(-11px) rotate(-7deg);
  padding: 15px;
  top: 29px;
  color: #a3b7cc;
}
.sheet-back > span {
  font-size: 5px;
  letter-spacing: 0.5px;
}
.sheet-back > i {
  display: block;
  height: 1px;
  background: #d4e0ed;
  margin-top: 16px;
}
.sheet-front {
  transform: rotate(4deg);
  padding: 13px 12px;
  transition:
    transform 0.6s,
    box-shadow 0.6s,
    border-color 0.6s;
}
.sheet-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  font-size: 5px;
  letter-spacing: 0.3px;
  color: #7993ad;
}
.sheet-title > .icon {
  width: 12px;
  height: 12px;
  color: #83a1c4;
}
.sheet-title > b {
  font-size: 6px;
  font-weight: 500;
  color: #7089a5;
  white-space: nowrap;
  background: #f0f4fa;
  padding: 3px 5px;
  border-radius: 2px;
}
.blueprint {
  width: 100%;
  height: auto;
  display: block;
  margin-top: 18px;
}
.plan-change {
  opacity: 0;
  transition: opacity 0.5s;
}
.sheet-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 5px;
  color: #a2b4c8;
}
.sheet-caption > b {
  font-size: 5px;
  font-weight: 500;
  color: #8ca3bc;
}
.revision-change-tag {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%) translateY(8px);
  white-space: nowrap;
  padding: 7px 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  border-radius: 4px;
  border: 1px solid #bedbcf;
  background: #f5fcf9;
  box-shadow: 0 3px 12px #3f7e6c10;
  font-size: 7px;
  color: #5c917d;
  opacity: 0;
  transition:
    opacity 0.5s,
    transform 0.5s;
}
.revision-change-tag > span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #5eaa88;
}
.revision-stage[data-revision="2"] .sheet-front {
  transform: translateY(-5px) rotate(-1deg);
  border-color: #8ab8ec;
  box-shadow: 0 12px 25px #1d6ac328;
}
.revision-stage[data-revision="2"] .plan-change {
  opacity: 1;
}
.revision-stage[data-revision="2"] .revision-change-tag {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.revision-stage[data-revision="2"] .sheet-title > b {
  background: #e5f1ff;
  color: #387dcc;
}
.revision-stage[data-revision="2"] .sheet-caption > b {
  color: #4b967d;
}
.revision-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}
.revision-options > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  padding: 10px 10px;
  min-height: 40px;
  font-size: 11px;
  color: #7690aa;
  background: #f7f9fd;
  border: 1px solid #e1e9f3;
  border-radius: 5px;
}
.revision-options > button > span {
  font-size: 8px;
  color: #95a8bc;
}
.revision-options > button[aria-pressed="true"] {
  color: #2979d5;
  border-color: #bad4f5;
  background: #edf5ff;
}
.revision-options > button[aria-pressed="true"] > span {
  color: #5c95cf;
}
.count-stage {
  background: linear-gradient(145deg, #edf4fc, #e3edfa);
  padding: 24px 24px 0;
}
.count-project {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 7px;
  letter-spacing: 0.8px;
  color: #83a0bc;
  padding-bottom: 18px;
  border-bottom: 1px solid #cddded;
}
.count-project > .icon {
  width: 14px;
  height: 14px;
}
.count-score {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin-top: 20px;
}
.count-score > div > span {
  display: block;
  font-size: 9px;
  color: #7c99b5;
  margin-bottom: 3px;
}
.count-score b {
  display: block;
  font-size: 49px;
  letter-spacing: -2px;
  color: #3a6c9e;
  font-weight: 500;
  line-height: 1.2;
}
.count-score b > small {
  font-size: 8px;
  color: #8fa8bf;
  font-weight: 400;
  letter-spacing: 0;
  margin-left: 5px;
}
.count-versus {
  font-size: 25px;
  color: #b6c9de;
  font-weight: 300;
}
.count-visual-binders {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 7px;
  margin-top: 22px;
}
.count-visual-binders > i {
  display: block;
  height: 36px;
  width: 23px;
  background: #6093c8;
  border: 1px solid #4f85bd;
  border-radius: 2px;
  position: relative;
  transition:
    opacity 0.4s,
    transform 0.4s,
    background 0.4s;
}
.count-visual-binders > i:before {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  height: 12px;
  top: 4px;
  background: #eaf4ff9c;
}
.count-visual-binders > i:after {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  bottom: 4px;
  left: 8px;
  border: 1px solid #c6ddf6;
  border-radius: 50%;
}
.count-visual-binders > i.missing {
  background: transparent;
  border: 1px dashed #b5c9de;
  transform: translateY(3px);
}
.count-visual-binders > i.missing:before,
.count-visual-binders > i.missing:after {
  opacity: 0;
}
.count-report {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  color: #7f9bb5;
  margin-top: 17px;
}
.count-report > .icon {
  width: 13px;
  height: 13px;
}
.count-stage[data-count-result="missing"] .count-report {
  color: #b17f3e;
}
.count-stage[data-count-result="missing"] #count-scene-value {
  color: #bd8741;
}
.count-stage[data-count-result="equal"] .count-report {
  color: #338a72;
}
.count-stage[data-count-result="extra"] .count-report {
  color: #286fbc;
}
.count-interaction {
  display: flex;
  gap: 9px;
  align-items: stretch;
}
.count-interaction > .lab-action {
  flex: 1;
  font-size: 10px;
  padding-inline: 9px;
  gap: 6px;
}
.count-stepper {
  display: flex;
  align-items: center;
  border: 1px solid #d2e1f3;
  border-radius: 5px;
  overflow: hidden;
  background: #f8fbff;
  flex: 1;
  min-width: 0;
}
.count-stepper > button {
  background: transparent;
  border: 0;
  width: 29px;
  height: 38px;
  flex-shrink: 0;
  color: #6291c0;
  font-size: 17px;
}
.count-stepper > input {
  background: transparent;
  border: 0;
  width: 100%;
  min-width: 20px;
  padding: 0;
  text-align: center;
  font-size: 14px;
  color: #3e70a2;
  appearance: textfield;
  -moz-appearance: textfield;
}
.count-stepper > input::-webkit-inner-spin-button,
.count-stepper > input::-webkit-outer-spin-button {
  appearance: none;
  margin: 0;
}
.count-stepper > button:hover {
  background: #e7f0fc;
}
.lab-bump {
  animation: lab-bump 0.35s ease-out;
}
.product-demo #demo-panel {
  transition: background 0.2s;
}
.mini-cabinet {
  transform-style: preserve-3d;
}
.mini-cabinet:hover {
  transform: perspective(800px) rotateY(-3deg) translateY(-4px);
}
#main-nav {
  gap: 24px;
}
#main-nav > a {
  white-space: nowrap;
}
@keyframes scan-beam {
  0%,
  100% {
    top: 17px;
  }
  50% {
    top: 96px;
  }
}
@keyframes lab-bump {
  0% {
    transform: translateY(4px);
    opacity: 0.4;
  }
  100% {
    transform: none;
    opacity: 1;
  }
}
@media (max-width: 1190px) {
  #main-nav {
    gap: 17px;
  }
  .lab-heading {
    gap: 40px;
  }
  .lab-heading h2 {
    font-size: 33px;
  }
  .lab-intro {
    max-width: 255px;
  }
  .lab-grid {
    gap: 15px;
  }
  .lab-card-body {
    padding: 23px 20px 19px;
  }
  .lab-sales-link {
    margin-inline: 20px;
    font-size: 9px;
  }
  .lab-stage {
    height: 270px;
  }
  .phone-frame {
    right: 7%;
    width: 142px;
    height: 252px;
  }
  .qr-physical-label {
    left: 6%;
    width: 91px;
    padding: 12px;
  }
  .qr-physical-label > svg {
    width: 53px;
    height: 53px;
  }
  .lab-card h3 {
    font-size: 26px;
  }
  .revision-sheet {
    width: 193px;
    height: 215px;
    margin-left: -96px;
  }
  .count-stage {
    padding-inline: 20px;
  }
  .count-score {
    gap: 18px;
  }
  .count-score b {
    font-size: 44px;
  }
  .count-visual-binders {
    gap: 6px;
  }
  .count-visual-binders > i {
    width: 21px;
  }
  .count-visual-binders > i:after {
    left: 7px;
  }
  .count-interaction {
    gap: 6px;
  }
  .count-stepper > button {
    width: 24px;
  }
  .count-interaction > .lab-action {
    font-size: 9px;
    gap: 4px;
    padding-inline: 7px;
  }
  .lab-card-heading {
    font-size: 7px;
    padding-inline: 17px;
  }
  .lab-card .lab-feedback {
    font-size: 9px;
    min-height: 69px;
  }
  .lab-bottom {
    font-size: 8px;
  }
}
@media (max-width: 980px) {
  #main-nav {
    gap: 14px;
  }
  #main-nav > a:nth-child(5) {
    display: none;
  }
  .lab-heading h2 {
    font-size: 29px;
  }
  .lab-intro {
    max-width: 230px;
  }
  .lab-intro > p {
    font-size: 11px;
  }
  .lab-grid {
    gap: 12px;
  }
  .lab-card-heading {
    padding: 14px 13px;
    font-size: 6px;
    letter-spacing: 0.6px;
  }
  .lab-card-heading > .icon {
    width: 14px;
    height: 14px;
  }
  .lab-stage {
    height: 232px;
  }
  .phone-frame {
    right: 5%;
    top: 6%;
    width: 121px;
    height: 218px;
    padding-top: 22px;
    border-width: 4px;
    border-radius: 19px;
  }
  .phone-header {
    font-size: 5px;
    gap: 3px;
  }
  .phone-header img {
    width: 16px;
    height: 16px;
  }
  .phone-viewfinder {
    height: 100px;
    margin-top: 9px;
  }
  .phone-code {
    width: 40px;
    height: 40px;
  }
  .phone-result {
    top: 120px;
    padding: 8px 4px;
  }
  .phone-result > strong {
    font-size: 6px;
  }
  .phone-result > span:not(.phone-result-status) {
    font-size: 4px;
  }
  .phone-result-status {
    font-size: 5px;
  }
  .phone-result > div {
    gap: 3px;
    margin-top: 5px;
  }
  .phone-result b {
    font-size: 4px;
    padding-inline: 3px;
  }
  .qr-stage[data-scan="found"] .phone-viewfinder {
    height: 54px;
  }
  .qr-physical-label {
    left: 5%;
    top: 38%;
    width: 75px;
    padding: 10px;
  }
  .qr-physical-label > svg {
    width: 43px;
    height: 43px;
  }
  .qr-physical-label > span {
    font-size: 5px;
    margin-top: 8px;
  }
  .qr-physical-label small {
    font-size: 3px;
  }
  .scan-success {
    left: 18%;
    bottom: 19px;
    width: 23px;
    height: 23px;
  }
  .lab-card-body {
    padding: 20px 16px 17px;
  }
  .lab-card h3 {
    font-size: 24px;
  }
  .lab-card p {
    font-size: 11px;
    min-height: 80px;
    margin-bottom: 16px;
  }
  .lab-action {
    font-size: 9px;
    gap: 7px;
    padding: 10px;
    min-height: 37px;
  }
  .lab-action > .icon {
    width: 13px;
    height: 13px;
  }
  .lab-example-note {
    font-size: 7px;
    min-height: 24px;
  }
  .lab-card .lab-feedback {
    font-size: 8px;
    min-height: 65px;
    padding: 9px;
  }
  .lab-sales-link {
    margin-inline: 16px;
    padding-block: 14px;
    font-size: 8px;
  }
  .lab-sales-link > .icon {
    width: 13px;
    height: 13px;
  }
  .revision-sheet {
    top: 30px;
    width: 164px;
    height: 180px;
    margin-left: -82px;
    padding: 11px;
  }
  .sheet-title {
    font-size: 4px;
    gap: 3px;
  }
  .sheet-title > b {
    font-size: 5px;
    padding: 2px 3px;
  }
  .sheet-title > .icon {
    width: 10px;
    height: 10px;
  }
  .blueprint {
    margin-top: 12px;
  }
  .sheet-caption {
    margin-top: 8px;
    font-size: 4px;
  }
  .sheet-caption > b {
    font-size: 4px;
  }
  .revision-change-tag {
    font-size: 6px;
    padding: 5px 7px;
    bottom: 9px;
  }
  .revision-options {
    gap: 4px;
  }
  .revision-options > button {
    padding: 9px 7px;
    font-size: 9px;
    min-height: 37px;
    gap: 2px;
  }
  .revision-options > button > span {
    font-size: 6px;
  }
  .count-stage {
    padding: 20px 16px 0;
  }
  .count-project {
    font-size: 5px;
    letter-spacing: 0.5px;
    padding-bottom: 14px;
  }
  .count-project > .icon {
    width: 12px;
    height: 12px;
  }
  .count-score {
    margin-top: 15px;
    gap: 15px;
  }
  .count-score > div > span {
    font-size: 7px;
  }
  .count-score b {
    font-size: 36px;
  }
  .count-score b > small {
    font-size: 6px;
    margin-left: 3px;
  }
  .count-versus {
    font-size: 19px;
  }
  .count-visual-binders {
    gap: 5px;
    margin-top: 18px;
  }
  .count-visual-binders > i {
    width: 18px;
    height: 31px;
  }
  .count-visual-binders > i:before {
    left: 4px;
    right: 4px;
    height: 10px;
  }
  .count-visual-binders > i:after {
    left: 5px;
    width: 4px;
    height: 4px;
  }
  .count-report {
    font-size: 6px;
    margin-top: 14px;
  }
  .count-interaction {
    flex-direction: column;
  }
  .count-stepper > button {
    width: 30px;
    height: 31px;
  }
  .count-interaction > .lab-action {
    min-height: 30px;
    padding: 6px;
    font-size: 9px;
  }
  .lab-count .lab-feedback {
    min-height: 54px;
  }
  .lab-bottom {
    align-items: flex-start;
    font-size: 8px;
    gap: 18px;
  }
  .lab-bottom > span {
    max-width: 380px;
    line-height: 1.8;
  }
  .lab-bottom > a {
    font-size: 8px;
    line-height: 1.8;
    white-space: nowrap;
  }
}
@media (max-width: 720px) {
  #main-nav > a:nth-child(5) {
    display: block;
  }
  .lab-heading {
    display: block;
    margin-bottom: 27px;
  }
  .lab-heading h2 {
    font-size: 29px;
    letter-spacing: -1.4px;
    line-height: 1.2;
  }
  .lab-heading h2 br {
    display: none;
  }
  .lab-heading .eyebrow {
    font-size: 7px;
    letter-spacing: 1.2px;
    margin-bottom: 18px;
  }
  .lab-intro {
    max-width: none;
    margin-top: 20px;
  }
  .lab-intro > p {
    font-size: 12px;
    max-width: 400px;
  }
  .lab-intro > button {
    font-size: 9px;
    padding: 8px 11px;
  }
  .lab-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .lab-card-heading {
    font-size: 8px;
    letter-spacing: 1px;
    padding: 16px 21px;
  }
  .lab-card-heading > .icon {
    width: 17px;
    height: 17px;
  }
  .lab-stage {
    height: 275px;
  }
  .lab-card-body {
    padding: 25px 24px 21px;
  }
  .lab-card h3 {
    font-size: 28px;
    line-height: 1.15;
  }
  .lab-card p {
    font-size: 12px;
    min-height: 0;
    margin-bottom: 19px;
  }
  .lab-card .lab-feedback {
    font-size: 10px;
    min-height: 0;
    padding: 11px 12px;
    margin-top: 15px;
  }
  .lab-action {
    font-size: 11px;
    padding: 11px 14px;
    gap: 10px;
    min-height: 42px;
  }
  .lab-action > .icon {
    width: 16px;
    height: 16px;
  }
  .lab-example-note {
    font-size: 8px;
    min-height: 0;
    margin-top: 9px;
  }
  .lab-sales-link {
    margin-inline: 24px;
    font-size: 10px;
    padding-block: 16px;
  }
  .lab-sales-link > .icon {
    width: 15px;
    height: 15px;
  }
  .phone-frame {
    width: 150px;
    height: 260px;
    right: 15%;
    top: 5%;
    border-width: 5px;
    border-radius: 23px;
    padding: 24px 8px 12px;
  }
  .phone-header {
    font-size: 6px;
    gap: 5px;
  }
  .phone-header img {
    width: 20px;
    height: 20px;
  }
  .phone-viewfinder {
    height: 120px;
    margin-top: 12px;
  }
  .phone-code {
    width: 48px;
    height: 48px;
  }
  .phone-result {
    top: 141px;
    padding: 10px 6px;
  }
  .phone-result > strong {
    font-size: 8px;
  }
  .phone-result > span:not(.phone-result-status) {
    font-size: 5px;
  }
  .phone-result-status {
    font-size: 6px;
  }
  .phone-result > div {
    gap: 4px;
    margin-top: 7px;
  }
  .phone-result b {
    font-size: 5px;
    padding-inline: 4px;
  }
  .qr-stage[data-scan="found"] .phone-viewfinder {
    height: 69px;
  }
  .qr-physical-label {
    left: 12%;
    top: 35%;
    width: 100px;
    padding: 15px;
  }
  .qr-physical-label > svg {
    width: 58px;
    height: 58px;
  }
  .qr-physical-label > span {
    font-size: 7px;
    margin-top: 12px;
  }
  .qr-physical-label small {
    font-size: 4px;
  }
  .scan-success {
    left: 24%;
    bottom: 21px;
    width: 28px;
    height: 28px;
  }
  .revision-sheet {
    top: 31px;
    width: 213px;
    height: 221px;
    margin-left: -106px;
    padding: 13px 12px;
  }
  .sheet-back {
    padding: 15px;
    top: 27px;
  }
  .sheet-title {
    font-size: 5px;
    gap: 5px;
  }
  .sheet-title > b {
    font-size: 6px;
    padding: 3px 5px;
  }
  .sheet-title > .icon {
    width: 12px;
    height: 12px;
  }
  .blueprint {
    margin-top: 18px;
  }
  .sheet-caption {
    margin-top: 10px;
    font-size: 5px;
  }
  .sheet-caption > b {
    font-size: 5px;
  }
  .revision-change-tag {
    font-size: 7px;
    padding: 7px 10px;
    bottom: 10px;
  }
  .revision-options {
    gap: 8px;
  }
  .revision-options > button {
    font-size: 12px;
    padding: 11px 13px;
    min-height: 42px;
  }
  .revision-options > button > span {
    font-size: 8px;
  }
  .count-stage {
    padding: 23px 26px 0;
  }
  .count-project {
    font-size: 7px;
    letter-spacing: 0.8px;
    padding-bottom: 18px;
  }
  .count-project > .icon {
    width: 14px;
    height: 14px;
  }
  .count-score {
    gap: 28px;
    margin-top: 20px;
  }
  .count-score > div > span {
    font-size: 9px;
  }
  .count-score b {
    font-size: 49px;
  }
  .count-score b > small {
    font-size: 8px;
    margin-left: 5px;
  }
  .count-versus {
    font-size: 25px;
  }
  .count-visual-binders {
    gap: 7px;
    margin-top: 22px;
  }
  .count-visual-binders > i {
    width: 23px;
    height: 36px;
  }
  .count-visual-binders > i:before {
    left: 6px;
    right: 6px;
    height: 12px;
  }
  .count-visual-binders > i:after {
    width: 5px;
    height: 5px;
    left: 8px;
  }
  .count-report {
    font-size: 8px;
    margin-top: 17px;
  }
  .count-interaction {
    flex-direction: row;
    gap: 10px;
  }
  .count-stepper > button {
    height: 40px;
    width: 34px;
  }
  .count-interaction > .lab-action {
    font-size: 11px;
    padding: 10px 12px;
    min-height: 42px;
    gap: 9px;
  }
  .lab-bottom {
    flex-direction: column;
    font-size: 9px;
    gap: 15px;
    margin-top: 21px;
  }
  .lab-bottom > span {
    max-width: none;
  }
  .lab-bottom > a {
    font-size: 10px;
    white-space: normal;
  }
  .lab-bottom .icon {
    flex-shrink: 0;
  }
  .lab-bump {
    animation-duration: 0.3s;
  }
}
@media (max-width: 370px) {
  .lab-card-body {
    padding-inline: 21px;
  }
  .lab-sales-link {
    margin-inline: 21px;
  }
  .phone-frame {
    right: 10%;
  }
  .qr-physical-label {
    left: 9%;
  }
  .lab-heading h2 {
    font-size: 27px;
  }
  .count-interaction {
    gap: 7px;
  }
  .count-interaction > .lab-action {
    font-size: 10px;
    padding-inline: 9px;
  }
  .count-stepper > button {
    width: 29px;
  }
  .lab-card-heading {
    font-size: 7px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .phone-scan-beam,
  .lab-bump {
    animation: none !important;
  }
  .phone-result,
  .phone-viewfinder,
  .sheet-front,
  .plan-change,
  .revision-change-tag,
  .count-visual-binders > i {
    transition: none !important;
  }
  .mini-cabinet:hover {
    transform: none;
  }
}
@media(max-width:720px){.lab-heading h2>span{display:block}}