.nav-cta {
  background: #5866ee;
}

.brand-logo {
  width: 126px;
  height: auto;
  display: block;
}

.closing-mark {
  width: 180px;
  border-radius: 999px;
  background: #fff;
}

.closing-mark img {
  width: 130px;
  height: auto;
  display: block;
}

/* ToothClick's primary blue carries the large colour surfaces. */
.dark-story {
  background: linear-gradient(145deg, #5866ee, #4d5be2 62%, #6572ef) !important;
}

.billing-canvas {
  background: radial-gradient(circle, rgba(255, 255, 255, .16), transparent 62%) !important;
}

.price-card {
  background: radial-gradient(circle at 88% 13%, rgba(255, 255, 255, .22), transparent 32%), linear-gradient(145deg, #5866ee, #4c5bdf 64%, #6572ef) !important;
}

.closing {
  background: linear-gradient(145deg, #5866ee, #4b59dc 64%, #626fef) !important;
}

.dash-side {
  background: #5866ee !important;
  color: rgba(255, 255, 255, .6) !important;
}

.dash-side button {
  color: rgba(255, 255, 255, .66) !important;
}

.dash-side button.side-active {
  background: #fff !important;
  color: #5866ee !important;
}

.price-block {
  gap: 18px;
}

.price-option {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.price-option small {
  color: rgba(255, 255, 255, .67);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .11em;
}

.price-option strong {
  margin-top: 8px;
  font-size: clamp(58px, 6vw, 82px);
  line-height: 1;
  letter-spacing: -.075em;
}

.price-option sup {
  position: relative;
  top: .19em;
  font-size: .45em;
  vertical-align: top;
}

.price-option span {
  margin-top: 8px;
  color: rgba(255, 255, 255, .74);
  font-size: 12px;
}

.international-price {
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .2);
}

.international-price strong {
  font-size: clamp(38px, 4vw, 54px);
}

.price-block > .button {
  margin-top: 8px;
}

/* Lucide icon sizing and alignment */
.inline-icon {
  width: 16px;
  height: 16px;
  margin-left: 6px;
  vertical-align: -3px;
}

.arrow {
  padding: 9px;
  stroke-width: 2;
}

.search-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.search-pill svg {
  width: 13px;
  height: 13px;
}

.stat-icon,
.workflow-icon,
.check,
.scan-icon,
.toast-icon,
.feature-check,
.benefit svg {
  stroke-width: 1.8;
}

.stat-icon {
  padding: 10px;
}

.benefit svg,
.feature-check {
  width: 26px;
  height: 26px;
  margin-right: 9px;
  padding: 6px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: #e2f5e9;
  color: #16894e;
  vertical-align: -8px;
}

.plan-features span {
  display: flex;
  align-items: center;
}

.feature-check {
  flex: 0 0 26px;
  background: rgba(111, 225, 157, .15);
  color: #82e2a5;
}

.check {
  padding: 6px;
}

.scan-chip > .scan-icon {
  width: 28px;
  height: 28px;
  padding: 7px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #dcf3e6;
  color: #168b53;
}

.share-toast > .toast-icon {
  width: 30px;
  height: 30px;
  padding: 6px;
  border-radius: 50%;
  background: #26a86c;
}

.workflow-icon {
  padding: 13px;
}

.whatsapp svg {
  width: 21px;
  height: 21px;
}

/* Customer testimony and original client logos */
.testimonials {
  padding: 140px 6vw;
  background: #f7f8fb;
}

.testimonial-card {
  max-width: 990px;
  margin: 72px auto 0;
  padding: clamp(36px, 6vw, 68px);
  border-radius: 32px;
  background: linear-gradient(145deg, #5866ee, #4e5de2 68%, #6875f0);
  color: #fff;
  box-shadow: 0 30px 80px rgba(66, 82, 196, .18);
}

.quote-mark {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 16px;
  background: rgba(255, 255, 255, .12);
}

.quote-mark svg {
  width: 24px;
  height: 24px;
}

.testimonial-card blockquote {
  max-width: 820px;
  margin: 34px 0 0;
  font-size: clamp(26px, 3.4vw, 44px);
  font-weight: 650;
  line-height: 1.28;
  letter-spacing: -.045em;
}

.testimonial-source {
  margin-top: 42px;
  padding-top: 25px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-top: 1px solid rgba(255, 255, 255, .2);
}

.testimonial-source > span {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.testimonial-source strong {
  font-size: 14px;
}

.testimonial-source small {
  color: rgba(255, 255, 255, .7);
  font-size: 12px;
}

.testimonial-source a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 750;
}

.testimonial-source a svg {
  width: 16px;
  height: 16px;
}

.lab-logo-grid {
  max-width: 1180px;
  margin: 68px auto 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}

.lab-logo-grid figure {
  min-width: 0;
  margin: 0;
  padding: 22px 14px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px solid #e5e8ee;
  border-radius: 18px;
  background: #fff;
}

.lab-logo-grid img {
  width: 100%;
  max-width: 112px;
  aspect-ratio: 1;
  object-fit: contain;
}

.lab-logo-grid figcaption {
  min-height: 34px;
  color: #657084;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

/* Independent rating tags near the bottom */
.rating-tags {
  padding: 34px clamp(24px, 6vw, 85px);
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 20px;
  border-bottom: 1px solid #e5e8ef;
  background: #f7f8fb;
}

.rating-tags > div {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.rating-tags > div span {
  font-size: 14px;
  font-weight: 750;
  letter-spacing: -.02em;
}

.rating-tags > div small {
  color: #7b8698;
  font-size: 11px;
}

.rating-tags a {
  padding: 9px 12px;
  display: grid;
  place-items: center;
  border: 1px solid #e0e4eb;
  border-radius: 13px;
  background: #fff;
  transition: transform .2s ease, box-shadow .2s ease;
}

.rating-tags a:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(29, 43, 82, .08);
}

.rating-tags img {
  width: auto;
  height: 47px;
  display: block;
}

.parent-link {
  color: #5866ee;
  font-weight: 750;
}

.parent-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* High-value dispatch story */
.dispatch-story {
  grid-template-columns: minmax(0, .78fr) minmax(520px, 1.22fr);
}

.dispatch-canvas {
  min-height: 640px;
  padding: 52px 0 0 52px;
  background: linear-gradient(145deg, #e7ebff, #f7f8ff 62%, #e5eaff);
}

.dispatch-window {
  width: 780px;
  min-height: 590px;
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, .95);
  border-radius: 22px 0 0 0;
  background: rgba(255, 255, 255, .93);
  box-shadow: 0 30px 80px rgba(45, 59, 118, .14);
}

.dispatch-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dispatch-head > div {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.dispatch-head small {
  color: #8b96a8;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .13em;
}

.dispatch-head strong {
  font-size: 18px;
  letter-spacing: -.04em;
}

.dispatch-head > span {
  padding: 9px 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #e4e7ed;
  border-radius: 10px;
  color: #677286;
  font-size: 9px;
  font-weight: 700;
}

.dispatch-head > span svg {
  width: 14px;
  height: 14px;
  color: #5866ee;
}

.dispatch-summary {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 11px;
}

.dispatch-summary article {
  min-height: 85px;
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 1px solid #e8ebf0;
  border-radius: 13px;
  background: #fff;
}

.dispatch-summary article > svg {
  width: 34px;
  height: 34px;
  padding: 8px;
  border-radius: 10px;
  background: #e9edff;
  color: #5064de;
}

.dispatch-summary article:nth-child(2) > svg {
  background: #fff1db;
  color: #cf8512;
}

.dispatch-summary article:nth-child(3) > svg {
  background: #def5e8;
  color: #22945e;
}

.dispatch-summary article > span {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.dispatch-summary small {
  color: #949dac;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .1em;
}

.dispatch-summary strong {
  font-size: 21px;
  letter-spacing: -.05em;
}

.dispatch-body {
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1.45fr .75fr;
  gap: 13px;
}

.dispatch-list,
.rider-panel {
  padding: 18px;
  border: 1px solid #e8ebf0;
  border-radius: 14px;
  background: #fff;
}

.dispatch-title {
  padding-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #edf0f3;
}

.dispatch-title strong {
  font-size: 11px;
}

.dispatch-title span {
  color: #5866ee;
  font-size: 8px;
  font-weight: 700;
}

.dispatch-list article {
  min-height: 71px;
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 11px;
  border-bottom: 1px solid #eff1f4;
}

.dispatch-list article:last-child {
  border-bottom: 0;
}

.dispatch-list time {
  color: #5e6b80;
  font-size: 9px;
  font-weight: 800;
}

.dispatch-list article > span {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dispatch-list article strong {
  font-size: 9px;
}

.dispatch-list article small {
  color: #8c96a6;
  font-size: 8px;
}

.dispatch-list em {
  padding: 6px 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 99px;
  background: #f0f2f6;
  color: #7b8595;
  font-size: 7px;
  font-style: normal;
  font-weight: 700;
}

.dispatch-list em i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.dispatch-list em.on-way {
  background: #e8ecff;
  color: #5063d7;
}

.dispatch-list em.ready {
  background: #e0f5e9;
  color: #218f5b;
}

.rider-panel {
  display: flex;
  flex-direction: column;
}

.rider-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rider-title > span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #e9edff;
  color: #5064dc;
}

.rider-title svg {
  width: 14px;
  height: 14px;
}

.rider-title small {
  color: #9099a8;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .1em;
}

.rider-person {
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.rider-avatar {
  width: 40px;
  height: 40px;
}

.rider-person > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rider-person strong {
  font-size: 10px;
}

.rider-person small,
.rider-route span {
  color: #8a95a5;
  font-size: 8px;
}

.rider-route {
  margin-top: 22px;
  padding-top: 15px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  border-top: 1px solid #edf0f3;
}

.rider-route strong {
  font-size: 10px;
}

.rider-panel button {
  margin-top: auto;
  min-height: 38px;
  border: 0;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: #5866ee;
  color: #fff;
  font-size: 8px;
  font-weight: 750;
}

.rider-panel button svg {
  width: 13px;
  height: 13px;
}

@media (max-width: 980px) {
  .dispatch-story {
    grid-template-columns: 1fr;
  }

  .lab-logo-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 720px) {
  .testimonials {
    padding: 95px 20px;
  }

  .testimonial-card {
    margin-top: 52px;
    padding: 32px 24px;
    border-radius: 24px;
  }

  .testimonial-source {
    align-items: flex-start;
    flex-direction: column;
  }

  .lab-logo-grid {
    margin-top: 46px;
    grid-template-columns: repeat(2, 1fr);
  }

  .rating-tags {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .rating-tags a {
    width: 100%;
  }

  .rating-tags img {
    height: 43px;
  }

  .dispatch-canvas {
    min-height: 670px;
    padding: 24px 0 0 18px;
  }

  .dispatch-window {
    width: calc(100% - 18px);
    min-height: 640px;
    padding: 16px;
    border-radius: 18px 0 0 0;
  }

  .dispatch-summary article {
    min-height: 84px;
    padding: 10px;
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .dispatch-body {
    grid-template-columns: 1fr;
  }

  .rider-panel {
    min-height: 155px;
  }

  .rider-person {
    margin-top: 14px;
  }

  .rider-route {
    margin-top: 12px;
    padding-top: 10px;
  }

  .rider-panel button {
    margin-top: 14px;
  }
}