:root {
  --tx-blue: #0049ba;
  --tx-blue-dark: #003a96;
  --tx-blue-soft: rgba(0, 73, 186, 0.1);
  --tx-blue-line: rgba(0, 73, 186, 0.28);
}

.nav-logo {
  width: auto;
  max-width: 9.5rem;
  object-fit: contain;
}

.home1_hero_image-2,
.home2_hero_image,
.home1_solution_image,
.home1_feature_image,
.home1_blog_qoute-image {
  object-fit: contain;
}

.home1_hero_image-2,
.home1_solution_image,
.home1_feature_image {
  filter: drop-shadow(0 24px 52px rgba(9, 18, 36, 0.16));
}

.truxcrm-view-switcher {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 0.25rem;
  min-width: 15rem;
  padding: 0.3rem;
  border: 1px solid rgba(11, 15, 20, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 14px 36px rgba(11, 15, 20, 0.08);
  backdrop-filter: blur(16px);
}

.truxcrm-view-button {
  min-height: 2.75rem;
  padding: 0.65rem 1.25rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(11, 15, 20, 0.62);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    color 220ms ease,
    background-color 220ms ease,
    box-shadow 220ms ease,
    transform 220ms ease;
}

.truxcrm-view-button:hover {
  color: #0b0f14;
}

.truxcrm-view-button:focus-visible {
  outline: 2px solid #0b0f14;
  outline-offset: 2px;
}

.truxcrm-view-button.is-active {
  color: #fff;
  background: #06121a;
  box-shadow: 0 8px 18px rgba(6, 18, 26, 0.2);
}

.home1_hero_wrapper {
  overflow: hidden;
}

.truxcrm-preview-stack {
  position: relative;
  display: grid;
  width: 80%;
  aspect-ratio: 4000 / 2381;
  margin-inline: auto;
  isolation: isolate;
}

.truxcrm-preview-stack > img {
  grid-area: 1 / 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.truxcrm-preview-stack.is-mobile {
  width: min(19%, 15rem);
  height: auto;
  aspect-ratio: 1940 / 4000;
  overflow: hidden;
  scrollbar-width: none;
}

.truxcrm-preview-stack.is-mobile > img {
  width: 100%;
  height: 100%;
}

.truxcrm-preview-stack.is-mobile::-webkit-scrollbar {
  display: none;
}

.truxcrm-preview-stack.is-mobile .truxcrm-preview-pagination {
  display: none;
}

/* Click-to-hold target covering the artwork. Deliberately invisible: the
   feedback is the rotation stopping. Only the cursor hints that it is
   interactive, and it sits under the pagination so the dots stay clickable. */
.truxcrm-preview-toggle {
  position: absolute;
  z-index: 2;
  inset: 0;
  padding: 0;
  border: 0;
  background: none;
  appearance: none;
  cursor: pointer;
}

.truxcrm-preview-toggle:focus-visible {
  border-radius: 0.75rem;
  outline: 2px solid #fff;
  outline-offset: -6px;
  box-shadow: inset 0 0 0 4px rgba(6, 18, 26, 0.55);
}

.truxcrm-preview-pagination {
  position: absolute;
  right: 50%;
  bottom: 0.75rem;
  z-index: 3;
  display: flex;
  gap: 0.4rem;
  align-items: center;
  padding: 0.45rem 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.36);
  border-radius: 999px;
  background: rgba(6, 18, 26, 0.58);
  box-shadow: 0 8px 24px rgba(6, 18, 26, 0.14);
  backdrop-filter: blur(12px);
  transform: translateX(50%);
}

.truxcrm-preview-dot {
  width: 0.48rem;
  height: 0.48rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.48);
  cursor: pointer;
  transition:
    width 220ms ease,
    background-color 220ms ease;
}

.truxcrm-preview-dot.is-active {
  width: 1.35rem;
  background: #fff;
}

.truxcrm-preview-dot:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.truxcrm-client-logo {
  width: auto;
  min-width: max-content;
  height: 4.5rem;
  flex: none;
  gap: 0.8rem;
  justify-content: flex-start;
  padding: 0 !important;
  border: 0;
  border-radius: 0 !important;
  background: transparent !important;
}

.truxcrm-client-logo .logos_marquee-image {
  width: 3.75rem;
  height: 3.75rem;
  flex: none;
  object-fit: contain;
}

/* Logos that spell the company out run wide and drop the printed name. */
.truxcrm-client-logo.is-wordmark .logos_marquee-image {
  width: auto;
  max-width: 13rem;
  height: 2.25rem;
}

.truxcrm-client-name {
  max-width: 11rem;
  color: #18212a;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* Security page ---------------------------------------------------------- */

/* Six controls rather than the template's four, so the row runs three up.
   The template's own breakpoints are re-stated because this rule outranks
   them. */
.truxcrm-security-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 991px) {
  .truxcrm-security-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575px) {
  .truxcrm-security-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* Screenshots are whole mockups, so fit them rather than cropping to fill. */
.section_features3_details .features3_details_image {
  height: auto;
  max-height: 24rem;
  padding: 1rem;
  border-radius: var(--radius--default, 12px);
  background: #f4f5f7;
  object-fit: contain;
}

.section_features3_home {
  /* The template fades its hero to black at the foot; the heading needs the
     tint carried higher so long copy stays readable over the photograph. */
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.86)),
    url("/mirror-assets/d60dbbf3bafd0ebef493.avif");
}

.section_features3_home .features3_home_wrapper {
  max-width: 46rem;
}

/* The template's banner art bleeds past the box; a product shot should sit
   inside it and share the card's corner radius. */
.section_home3_banner .home3_banner_image {
  height: 100%;
  border-radius: var(--radius--default, 12px);
}

/* Features page ---------------------------------------------------------- */

/* The template crops its hero and detail art to fill. Product screenshots are
   whole mockups, so they are fitted instead of cropped, on a soft panel. */
.section_features1_hero .features2_hero_image,
.section_features1_details .features1_details_image {
  border-radius: var(--radius--default, 12px);
  background: #f4f5f7;
  object-fit: contain;
}

.section_features1_hero .features2_hero_image {
  padding: 0.75rem;
}

.section_features1_details .features1_details_image {
  height: auto;
  align-self: center;
  padding: 1rem;
}

/* The dark card's mark is a full logo, not the template's square avatar. */
.truxcrm-features-mark {
  width: 6.5rem;
  height: auto;
  flex: none;
}

.features1_hero_qoute .features1_hero_author {
  gap: 0.85rem;
}

.truxcrm-capability-grid {
  align-content: start;
}

/* Mobile reach ----------------------------------------------------------- */

.truxcrm-reach-grid {
  align-items: center;
}

.truxcrm-reach-right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.truxcrm-reach-right .blog-list {
  width: 100%;
}

.truxcrm-reach-title {
  margin-bottom: 0.35rem;
  color: #12181f;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.truxcrm-mobile-visual {
  position: relative;
}

.truxcrm-mobile-shot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius--default, 12px);
  animation: truxcrm-reach-float 9s ease-in-out infinite;
}

/* Sample push notifications, placed in the clear corners of the mockup. */
.truxcrm-push {
  position: absolute;
  display: flex;
  width: min(18rem, 66%);
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid rgba(11, 15, 20, 0.07);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 40px rgba(11, 15, 20, 0.16);
  backdrop-filter: blur(10px);
}

.truxcrm-push.is-first {
  top: 4%;
  right: -3%;
  animation: truxcrm-push-in 11s ease-in-out infinite;
}

.truxcrm-push.is-second {
  bottom: 6%;
  left: -3%;
  animation: truxcrm-push-in 11s ease-in-out 1.4s infinite;
}

.truxcrm-push-icon {
  display: flex;
  width: 2.1rem;
  height: 2.1rem;
  flex: none;
  align-items: center;
  justify-content: center;
  padding: 0.32rem;
  border-radius: 8px;
  background: var(--tx-blue-soft);
}

.truxcrm-push-icon img {
  width: 100%;
  height: auto;
}

.truxcrm-push-title {
  color: #12181f;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.truxcrm-push-body {
  color: #6b7480;
  font-size: 0.78rem;
  line-height: 1.35;
}

.truxcrm-push-time {
  align-self: flex-start;
  color: #9aa2ac;
  font-size: 0.7rem;
}

@keyframes truxcrm-reach-float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-0.6rem);
  }
}

/* Each notification settles in, holds, then drifts back: the arrival of a
   push rather than a card that simply sits there. */
@keyframes truxcrm-push-in {
  0% {
    opacity: 0;
    transform: translateY(0.9rem) scale(0.97);
  }

  6%,
  88% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  97%,
  100% {
    opacity: 0;
    transform: translateY(-0.5rem) scale(0.99);
  }
}

/* Pricing ---------------------------------------------------------------- */

/* One plan instead of the template's three, so the plan grid runs two up. */
.plan_grid.is-truxcrm {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.375rem;
}

.plan_grid.is-truxcrm .plan_plan-box {
  height: 100%;
}

/* The vendor divider is near-black, which disappears on the dark card. */
.plan_plan-box.is-dark .divider {
  background-color: rgba(255, 255, 255, 0.22);
}

/* The template fades its overlay to transparent, which is fine on its short
   card but drops this taller one's text onto the bright part of the image.
   Same artwork, overlay carried the whole way down. */
.plan_grid.is-truxcrm .plan_plan-box.is-dark {
  background-image:
    linear-gradient(
      rgba(0, 0, 0, 0.94) 0%,
      rgba(0, 0, 0, 0.82) 45%,
      rgba(0, 0, 0, 0.76) 100%
    ),
    url("/mirror-assets/5ed07e0ee7cba667dfe8.avif");
}

/* Reviews ---------------------------------------------------------------- */

/* Cards carry different quote lengths, so stretch keeps their edges aligned. */
.section_home1_reviews .reviews_marquee-list {
  align-items: stretch;
  gap: 1rem;
  padding-right: 1rem;
}

.truxcrm-review-card {
  gap: 1.15rem;
  height: auto;
  margin: 0;
  border-color: rgba(11, 15, 20, 0.09);
  box-shadow: 0 1px 2px rgba(11, 15, 20, 0.04);
}

/* figcaption is centred by the vendor reset; the card reads left-aligned. */
.truxcrm-review-card .review-author {
  margin: 0;
  text-align: left;
}

.truxcrm-review-avatar {
  display: flex;
  width: 3rem;
  height: 3rem;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--tx-blue-soft);
  color: var(--tx-blue);
  font-family: var(--fonts--badge, inherit);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.truxcrm-review-avatar.is-photo {
  display: block;
  object-fit: cover;
  background: rgba(11, 15, 20, 0.05);
  box-shadow: inset 0 0 0 1px rgba(11, 15, 20, 0.08);
}

.truxcrm-review-name {
  color: #12181f;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.truxcrm-review-role {
  font-size: 0.85rem;
  line-height: 1.35;
}

/* The vendor reset gives every blockquote a heavy rule and indent. */
.truxcrm-review-quote {
  margin: 0;
  padding: 0;
  border: 0;
  color: #3b444f;
  font-size: 0.95rem;
  font-style: normal;
  line-height: 1.6;
}

.truxcrm-review-quote::before {
  content: "\201C";
}

.truxcrm-review-quote::after {
  content: "\201D";
}

.truxcrm-workflow-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  border: 1px solid rgba(11, 15, 20, 0.06);
  border-radius: var(--radius--default);
  background:
    radial-gradient(circle at 18% 16%, rgba(82, 109, 255, 0.1), transparent 34%),
    linear-gradient(145deg, #f8f9fb 0%, #f2f4f7 100%);
}

.truxcrm-workflow-visual::before {
  position: absolute;
  width: 9rem;
  height: 9rem;
  border: 1px solid rgba(82, 109, 255, 0.1);
  border-radius: 50%;
  content: "";
  inset: -4.5rem -4rem auto auto;
}

.truxcrm-workflow-visual.is-dispatch {
  background:
    radial-gradient(circle at 84% 14%, rgba(33, 173, 127, 0.11), transparent 32%),
    linear-gradient(145deg, #f8faf9 0%, #f1f5f3 100%);
}

.truxcrm-workflow-visual.is-payment {
  background:
    radial-gradient(circle at 20% 88%, rgba(240, 153, 44, 0.12), transparent 34%),
    linear-gradient(145deg, #faf9f7 0%, #f5f3ef 100%);
}

.truxcrm-mini-panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  width: 100%;
  padding: clamp(1rem, 2.2vw, 1.4rem);
  border: 1px solid rgba(11, 15, 20, 0.08);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 20px 44px rgba(20, 28, 38, 0.09);
  color: #18212a;
}

.truxcrm-mini-header,
.truxcrm-lead-profile,
.truxcrm-carrier-row,
.truxcrm-driver-row,
.truxcrm-quote-row,
.truxcrm-route-row {
  display: flex;
  align-items: center;
}

.truxcrm-mini-header {
  justify-content: space-between;
  color: #6e7781;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.truxcrm-status-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #26a56f;
  box-shadow: 0 0 0 0.28rem rgba(38, 165, 111, 0.12);
}

.truxcrm-lead-profile,
.truxcrm-carrier-row {
  gap: 0.65rem;
  padding: 0.75rem;
  border: 1px solid rgba(11, 15, 20, 0.07);
  border-radius: 0.75rem;
  background: #fff;
}

.truxcrm-mini-icon {
  display: grid;
  width: 2rem;
  height: 2rem;
  flex: none;
  place-items: center;
  border-radius: 0.6rem;
  background: #e9edff;
  color: #526dff;
  font-size: 0.62rem;
  font-weight: 800;
}

.truxcrm-mini-icon.is-dark {
  background: #17212b;
  color: #fff;
}

.truxcrm-lead-profile div,
.truxcrm-carrier-row div,
.truxcrm-quote-row div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.12rem;
}

.truxcrm-mini-panel strong {
  font-size: 0.78rem;
  line-height: 1.2;
}

.truxcrm-mini-panel small {
  color: #7c858f;
  font-size: 0.64rem;
  line-height: 1.2;
}

.truxcrm-route-row {
  gap: 0.55rem;
  color: #555f69;
  font-size: 0.64rem;
  font-weight: 600;
}

.truxcrm-route-line {
  position: relative;
  height: 1px;
  flex: 1;
  background: repeating-linear-gradient(90deg, #a8b0b8 0 3px, transparent 3px 6px);
}

.truxcrm-route-line::before,
.truxcrm-route-line::after {
  position: absolute;
  top: 50%;
  width: 0.35rem;
  height: 0.35rem;
  border: 2px solid #526dff;
  border-radius: 50%;
  background: #fff;
  content: "";
  transform: translateY(-50%);
}

.truxcrm-route-line::before {
  left: 0;
}

.truxcrm-route-line::after {
  right: 0;
}

.truxcrm-quote-row,
.truxcrm-driver-row {
  justify-content: space-between;
  padding-top: 0.65rem;
  border-top: 1px solid rgba(11, 15, 20, 0.07);
}

.truxcrm-status-pill {
  flex: none;
  padding: 0.35rem 0.55rem;
  border-radius: 999px;
  background: #eaf7f1;
  color: #16865b;
  font-size: 0.58rem;
  font-weight: 700;
  line-height: 1;
}

.truxcrm-order-id {
  color: #17212b;
  letter-spacing: 0;
}

.truxcrm-dispatch-route {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.55rem;
  align-items: center;
  padding: 0.45rem 0;
}

.truxcrm-route-stop {
  display: grid;
  width: 1.9rem;
  height: 1.9rem;
  place-items: center;
  border-radius: 50%;
  background: #17212b;
  color: #fff;
  font-size: 0.58rem;
  font-weight: 800;
}

.truxcrm-route-track {
  position: relative;
  height: 2px;
  background: #d6ddd9;
}

.truxcrm-route-track i {
  position: absolute;
  top: 50%;
  left: 58%;
  width: 0.55rem;
  height: 0.55rem;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #26a56f;
  box-shadow: 0 0 0 2px rgba(38, 165, 111, 0.2);
  transform: translate(-50%, -50%);
}

.truxcrm-carrier-row .truxcrm-status-pill {
  margin-left: auto;
}

.truxcrm-driver-row {
  color: #707983;
  font-size: 0.62rem;
}

.truxcrm-driver-row strong {
  color: #16865b;
  font-size: 0.64rem;
}

.truxcrm-payment-main {
  display: grid;
  grid-template-columns: 5.75rem 1fr;
  gap: 0.9rem;
  align-items: center;
  padding: 0.4rem 0;
}

.truxcrm-payment-ring {
  display: grid;
  width: 5.75rem;
  height: 5.75rem;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(#26a56f 0 80.6%, #f09a34 80.6% 100%);
}

.truxcrm-payment-ring > div {
  display: flex;
  width: 4.35rem;
  height: 4.35rem;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-radius: 50%;
  background: #fff;
}

.truxcrm-payment-ring strong {
  font-size: 0.95rem;
}

.truxcrm-payment-breakdown {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.65rem;
}

.truxcrm-payment-breakdown > div {
  display: grid;
  grid-template-columns: 0.5rem 1fr;
  gap: 0.1rem 0.45rem;
  align-items: center;
}

.truxcrm-payment-breakdown i {
  width: 0.45rem;
  height: 0.45rem;
  grid-row: 1 / span 2;
  border-radius: 50%;
}

.truxcrm-payment-breakdown i.is-fee {
  background: #f09a34;
}

.truxcrm-payment-breakdown i.is-carrier {
  background: #26a56f;
}

.truxcrm-payment-breakdown span {
  color: #737c86;
  font-size: 0.6rem;
}

.truxcrm-payment-breakdown strong {
  font-size: 0.7rem;
}

.truxcrm-feature-showcase {
  overflow: clip;
}

.truxcrm-feature-head {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 3rem;
  align-items: flex-end;
  justify-content: space-between;
}

.truxcrm-feature-heading {
  max-width: 46rem;
}

.truxcrm-feature-heading h2 {
  max-width: 40rem;
  margin: 0;
  color: var(--tx-blue);
  font-size: clamp(2.35rem, 4vw, 3.7rem);
  line-height: 1;
}

.truxcrm-feature-heading .text-style-badge {
  width: max-content;
}

.truxcrm-feature-heading p {
  max-width: 38rem;
  margin: 0;
  color: rgba(11, 15, 20, 0.62);
  font-size: 0.98rem;
}

.truxcrm-feature-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(21rem, 0.88fr);
  gap: clamp(2.75rem, 6vw, 5.5rem);
  align-items: start;
}

.truxcrm-feature-accordion {
  border-top: 1px solid rgba(11, 15, 20, 0.11);
}

.truxcrm-feature-link {
  display: inline-flex;
  gap: 0.45rem;
  align-items: center;
  margin-top: 1.6rem;
  color: rgba(11, 15, 20, 0.6);
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 220ms ease;
}

.truxcrm-feature-link svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.truxcrm-feature-link:hover {
  color: #12181f;
}

.truxcrm-feature-link:hover svg {
  transform: translateX(3px);
}

.truxcrm-feature-item {
  border-bottom: 1px solid rgba(11, 15, 20, 0.11);
}

.truxcrm-feature-summary {
  display: grid;
  min-height: 4.9rem;
  grid-template-columns: 1.65rem minmax(0, 1fr) 1.1rem;
  gap: 1.05rem;
  align-items: center;
  padding: 1rem 0;
  list-style: none;
  cursor: pointer;
}

.truxcrm-feature-summary::-webkit-details-marker {
  display: none;
}

.truxcrm-feature-summary:focus-visible {
  outline: 2px solid #17212b;
  outline-offset: 5px;
  border-radius: 0.5rem;
}

/* No tinted container: the mark sits directly on the row and simply gains ink
   weight when its item is open. */
.truxcrm-feature-icon {
  display: grid;
  place-items: center;
  color: rgba(11, 15, 20, 0.38);
  transition: color 260ms ease;
}

.truxcrm-feature-icon svg {
  width: 1.65rem;
  height: 1.65rem;
}

.truxcrm-feature-summary:hover .truxcrm-feature-icon,
.truxcrm-feature-item[open] .truxcrm-feature-icon {
  color: #18212a;
}

.truxcrm-feature-icon .tx-ico-fill {
  fill: currentColor;
  stroke: none;
  opacity: 0.13;
}

.truxcrm-feature-icon .tx-ico-line,
.truxcrm-feature-icon .tx-ico-bar,
.truxcrm-feature-icon .tx-ico-trend,
.truxcrm-feature-icon .tx-ico-sign,
.truxcrm-feature-icon .tx-ico-reply,
.truxcrm-feature-icon .tx-ico-check {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.45;
}

.truxcrm-feature-icon .tx-ico-bar {
  stroke-width: 1.9;
}

.truxcrm-feature-icon .tx-ico-trend,
.truxcrm-feature-icon .tx-ico-sign {
  opacity: 0.5;
  stroke-width: 1.25;
}

.truxcrm-feature-icon .tx-ico-check {
  stroke: #fff;
  stroke-width: 1.8;
}

.truxcrm-feature-icon .tx-ico-badge,
.truxcrm-feature-icon .tx-ico-spark {
  fill: currentColor;
  stroke: none;
}

.truxcrm-feature-title {
  color: rgba(11, 15, 20, 0.72);
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: -0.018em;
  transition: color 240ms ease;
}

.truxcrm-feature-summary:hover .truxcrm-feature-title {
  color: #12181f;
}

/* The open row is the one being previewed, so its title carries the brand blue. */
.truxcrm-feature-item[open] .truxcrm-feature-title {
  color: var(--tx-blue);
}

/* Plain chevron rather than a filled circular +/-. */
.truxcrm-feature-toggle {
  position: relative;
  width: 1.1rem;
  height: 1.1rem;
}

.truxcrm-feature-toggle::before,
.truxcrm-feature-toggle::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.85rem;
  height: 1.5px;
  border-radius: 2px;
  background: rgba(11, 15, 20, 0.4);
  content: "";
  transform: translate(-50%, -50%);
  transition:
    background-color 240ms ease,
    transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.truxcrm-feature-toggle::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.truxcrm-feature-summary:hover .truxcrm-feature-toggle::before,
.truxcrm-feature-summary:hover .truxcrm-feature-toggle::after {
  background: #12181f;
}

.truxcrm-feature-item[open] .truxcrm-feature-toggle::before,
.truxcrm-feature-item[open] .truxcrm-feature-toggle::after {
  background: #12181f;
}

.truxcrm-feature-item[open] .truxcrm-feature-toggle::after {
  transform: translate(-50%, -50%) rotate(0);
}

.truxcrm-feature-detail {
  transform-origin: top;
}

.truxcrm-feature-detail-inner {
  padding: 0 2rem 1.65rem 2.7rem;
}

.truxcrm-feature-detail p {
  max-width: 33rem;
  margin: 0;
  color: rgba(11, 15, 20, 0.7);
  font-size: 1rem;
  line-height: 1.6;
}

/* Second line carries the concrete field names, set quieter than the lead
   sentence so the two read as statement then specifics. */
.truxcrm-feature-spec {
  margin-top: 0.7rem !important;
  color: rgba(11, 15, 20, 0.46) !important;
  font-size: 0.88rem !important;
  line-height: 1.55 !important;
}

.truxcrm-feature-shot {
  display: none;
}

.truxcrm-feature-preview {
  position: sticky;
  top: 6.5rem;
  display: flex;
  min-height: 36rem;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
  padding: 2.5rem 0 1.5rem;
}

.truxcrm-feature-phone {
  width: auto;
  max-width: 100%;
  height: 28rem;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 26px 34px rgba(18, 28, 40, 0.18));
  transition:
    opacity 180ms ease,
    transform 260ms ease;
}

/* Landscape captures need the full width of the panel, not a phone-sized
   column, and they sit centred rather than resting on the base. */
/* Shots that ship with their own photographic backdrop are framed as a card:
   a bare rectangle reads as a pasted screenshot against the soft panel. */
.truxcrm-feature-phone[data-kind="scene-wide"],
.truxcrm-feature-phone[data-kind="scene-tall"] {
  width: 100%;
  height: auto;
  max-height: 28rem;
  margin-block: auto;
  border-radius: 1.15rem;
  object-fit: cover;
  object-position: center;
  filter: none;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6),
    0 18px 34px rgba(18, 28, 40, 0.16);
}

.truxcrm-feature-phone[data-kind="scene-tall"] {
  width: auto;
  height: 28rem;
  max-width: 100%;
}

.truxcrm-feature-phone[data-kind="desktop"] {
  width: 100%;
  height: auto;
  max-height: 28rem;
  margin-block: auto;
  object-position: center;
  filter: drop-shadow(0 22px 30px rgba(18, 28, 40, 0.16));
}

/* A landscape capture wants the panel's full width, so pull the side padding
   in and let the image run edge to edge. */
.truxcrm-feature-preview[data-kind="desktop"],
.truxcrm-feature-preview[data-kind="scene-wide"],
.truxcrm-feature-preview[data-kind="scene-tall"] {
  justify-content: center;
}

.truxcrm-feature-phone.is-changing {
  opacity: 0;
  transform: translateY(0.75rem) scale(0.985);
}

.truxcrm-preview-footer {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.4rem;
}

.truxcrm-preview-controls[hidden] {
  display: none;
}

.truxcrm-preview-controls {
  display: flex;
  gap: 0.25rem;
  align-items: center;
}

.truxcrm-view-arrow {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  padding: 0;
  border: 1.5px solid var(--tx-blue-line);
  border-radius: 50%;
  background: #fff;
  color: var(--tx-blue);
  cursor: pointer;
  transition:
    border-color 200ms ease,
    color 200ms ease,
    background-color 200ms ease,
    box-shadow 200ms ease;
}

.truxcrm-view-arrow svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.truxcrm-view-arrow:hover {
  border-color: var(--tx-blue);
  background: var(--tx-blue);
  color: #fff;
  box-shadow: 0 6px 16px rgba(0, 73, 186, 0.28);
}

.truxcrm-view-arrow:focus-visible,
.truxcrm-view-dot:focus-visible {
  outline: 2px solid var(--tx-blue);
  outline-offset: 2px;
}

.truxcrm-view-dots {
  display: flex;
  gap: 0.15rem;
  align-items: center;
}

/* Padded hit area around a small visual dot, so the target clears 24px. */
.truxcrm-view-dot {
  display: grid;
  width: 1.9rem;
  height: 1.9rem;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}

.truxcrm-view-dot::before {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: var(--tx-blue-line);
  content: "";
  transition:
    width 280ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 220ms ease;
}

.truxcrm-view-dot:hover::before {
  background: rgba(0, 73, 186, 0.55);
}

.truxcrm-view-dot[aria-current="true"]::before {
  width: 1.5rem;
  background: var(--tx-blue);
}

.truxcrm-preview-caption {
  color: rgba(11, 15, 20, 0.5);
  font-size: 0.85rem;
  transition: opacity 180ms ease;
}

.truxcrm-preview-caption.is-changing {
  opacity: 0;
}

.w-commerce-commercecartwrapper,
.nav-dropdown-column.is-buy-template,
.footer_banners,
.badges {
  display: none !important;
}

.footer_image {
  width: min(14rem, 55vw);
  height: auto;
  object-fit: contain;
}

@media (max-width: 991px) {
  .plan_grid.is-truxcrm {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 767px) {
  .nav-logo {
    max-width: 8rem;
  }

  /* The template drops the hero grid to two columns; screenshots need the
     full width on a phone, and the dark card needs a smaller mark. */
  .section_features1_hero .features1_hero_grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .truxcrm-features-mark {
    width: 5rem;
  }

  /* The mockup is small on a phone, so the notifications tuck inside its edges
     instead of hanging off them. */
  .truxcrm-push {
    width: min(15rem, 74%);
    gap: 0.5rem;
    padding: 0.55rem 0.65rem;
  }

  .truxcrm-push.is-first {
    top: 3%;
    right: 0;
  }

  .truxcrm-push.is-second {
    bottom: 4%;
    left: 0;
  }

  .truxcrm-push-icon {
    width: 1.7rem;
    height: 1.7rem;
  }

  .truxcrm-push-title {
    font-size: 0.78rem;
  }

  .truxcrm-push-body {
    font-size: 0.72rem;
  }

  /* A 320px card plus the scrim clips the quote on a phone, so narrow the
     card and pull the fade back to the very edges. */
  .truxcrm-review-card {
    width: 16.5rem;
    gap: 0.9rem;
    padding: 1.25rem;
  }

  .section_home1_reviews .reviews_marquee-list {
    gap: 0.75rem;
    padding-right: 0.75rem;
  }

  .section_home1_reviews .reviews_marquee-scrim {
    background-image: linear-gradient(
      90deg,
      #fafafa,
      #fafafa00 7% 93%,
      #fafafa
    );
  }

  .truxcrm-review-avatar {
    width: 2.6rem;
    height: 2.6rem;
    font-size: 0.78rem;
  }

  .truxcrm-review-name {
    font-size: 0.95rem;
  }

  .truxcrm-review-role {
    font-size: 0.8rem;
  }

  .truxcrm-review-quote {
    font-size: 0.9rem;
  }

  .truxcrm-view-switcher {
    width: min(100%, 17rem);
    min-width: 0;
  }

  .truxcrm-preview-stack.is-mobile {
    width: min(52%, 14rem);
  }

  .truxcrm-client-logo {
    height: 4rem;
    gap: 0.65rem;
  }

  .truxcrm-client-logo .logos_marquee-image {
    width: 3.25rem;
    height: 3.25rem;
  }

  .truxcrm-client-name {
    max-width: 9rem;
    font-size: 0.8rem;
  }

  .truxcrm-workflow-visual {
    padding: 1.25rem;
  }

  .truxcrm-mini-panel {
    max-width: 20rem;
  }

  .truxcrm-feature-heading p {
    font-size: 0.92rem;
  }

  .truxcrm-feature-heading h2 {
    font-size: clamp(2rem, 9.5vw, 2.6rem);
  }

  .truxcrm-feature-summary {
    grid-template-columns: 1.45rem minmax(0, 1fr) 1rem;
    gap: 0.75rem;
    min-height: 4.25rem;
    padding: 0.85rem 0;
  }

  .truxcrm-feature-icon svg {
    width: 1.45rem;
    height: 1.45rem;
  }

  .truxcrm-feature-title {
    font-size: 1rem;
    line-height: 1.3;
  }

  /* Reclaim the indent: on a 360px screen it cost ~11% of the line. */
  .truxcrm-feature-detail-inner {
    padding: 0 0 1.4rem;
  }

  .truxcrm-feature-detail p {
    font-size: 0.95rem;
  }

  .truxcrm-feature-spec {
    font-size: 0.86rem !important;
  }

  .truxcrm-feature-link {
    margin-top: 1.35rem;
  }

}

@media (max-width: 991px) {
  .truxcrm-feature-layout {
    grid-template-columns: 1fr;
    gap: 0;
  }

  /* The shared sticky panel only earns its place beside the list. */
  .truxcrm-feature-preview {
    display: none;
  }

  .truxcrm-feature-shot {
    display: flex;
    max-width: 26rem;
    height: 20rem;
    align-items: center;
    justify-content: center;
    margin-top: 1.25rem;
    padding: 1rem 0;
  }

  /* Views are stacked so the swap crossfades in place instead of reflowing. */
  .truxcrm-feature-shot {
    position: relative;
  }

  .truxcrm-feature-shot img[data-kind="scene-wide"],
  .truxcrm-feature-shot img[data-kind="scene-tall"] {
    border-radius: 0.9rem;
    filter: none;
    box-shadow: 0 12px 24px rgba(18, 28, 40, 0.14);
  }

  /* Reserve a strip at the bottom so the view dots sit under the shot rather
     than on top of it. */
  .truxcrm-feature-shot img {
    position: absolute;
    top: 0;
    width: auto;
    max-width: 100%;
    height: calc(100% - 2.6rem);
    object-fit: contain;
    opacity: 0;
    filter: drop-shadow(0 16px 26px rgba(18, 28, 40, 0.16));
    transition: opacity 340ms ease;
  }

  .truxcrm-feature-shot img.is-active {
    opacity: 1;
  }

  .truxcrm-feature-shot .truxcrm-view-dots {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  /* The notifications stay put and visible rather than arriving on a loop. */
  .truxcrm-mobile-shot,
  .truxcrm-push.is-first,
  .truxcrm-push.is-second {
    animation: none;
  }

  .truxcrm-view-button,
  .truxcrm-preview-dot,
  .truxcrm-feature-item,
  .truxcrm-feature-summary,
  .truxcrm-feature-title,
  .truxcrm-feature-icon,
  .truxcrm-feature-toggle,
  .truxcrm-feature-phone,
  .truxcrm-feature-link svg,
  .truxcrm-view-dot::before,
  .truxcrm-view-arrow,
  .truxcrm-feature-shot img,
  .truxcrm-preview-caption {
    transition: none;
    animation: none !important;
  }
}

/* ---------- Lifecycle (benefits) section ---------- */

.truxcrm-lifecycle .home1_benefits_dashboard img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Five stages, so the template's four-column grid needs one more track. */
.truxcrm-step-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

.truxcrm-step-item {
  position: relative;
  padding-top: 1.15rem;
  border-top: 1px solid rgba(11, 15, 20, 0.12);
}

/* A connector line reads the row as a sequence rather than five loose cards. */
.truxcrm-step-item::after {
  position: absolute;
  top: -1px;
  left: 0;
  width: 2.2rem;
  height: 1px;
  background: #17212b;
  content: "";
}

.truxcrm-step-header {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  margin-bottom: 0.4rem;
}

.truxcrm-step-icon {
  display: grid;
  flex: none;
  place-items: center;
  color: #17212b;
}

.truxcrm-step-icon svg {
  width: 1.35rem;
  height: 1.35rem;
}

.truxcrm-step-icon .tx-step-fill {
  fill: currentColor;
  stroke: none;
  opacity: 0.12;
}

.truxcrm-step-icon .tx-step-line {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.truxcrm-step-index {
  margin-left: auto;
  color: rgba(11, 15, 20, 0.32);
  font-family: var(--fonts--badge);
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 991px) {
  .truxcrm-step-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 575px) {
  .truxcrm-step-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ---------- Contact section ---------- */

.truxcrm-contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

.truxcrm-contact-brand {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  align-items: center;
  text-align: center;
}

/* Logo sits still at the centre; only the ring turns. */
.truxcrm-orbit {
  position: relative;
  display: grid;
  width: min(100%, 21rem);
  aspect-ratio: 1;
  place-items: center;
}

.truxcrm-orbit-ring {
  position: absolute;
  width: 100%;
  height: 100%;
  animation: truxcrm-orbit-spin 26s linear infinite;
}

.truxcrm-orbit-line {
  fill: none;
  stroke: var(--tx-blue-line);
  stroke-width: 1;
}

.truxcrm-orbit-text {
  fill: var(--tx-blue);
  font-family: var(--fonts--badge);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Both marks occupy the same grid cell so the swap is opacity only. The two
   keyframe sets are mirror images on one 4s clock: 2s held, then a short
   crossfade, which keeps them in step without any script. */
.truxcrm-orbit-logo {
  grid-area: 1 / 1;
  height: auto;
  object-fit: contain;
}

.truxcrm-orbit-logo.is-wordmark {
  width: 52%;
  animation: truxcrm-mark-out 4s ease-in-out infinite;
}

.truxcrm-orbit-logo.is-mark {
  width: 31%;
  animation: truxcrm-mark-in 4s ease-in-out infinite;
}

@keyframes truxcrm-mark-out {
  0%,
  44% {
    opacity: 1;
  }
  50%,
  94% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes truxcrm-mark-in {
  0%,
  44% {
    opacity: 0;
  }
  50%,
  94% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes truxcrm-orbit-spin {
  to {
    transform: rotate(360deg);
  }
}

.truxcrm-orbit-caption {
  max-width: 22rem;
  margin: 0;
  color: rgba(11, 15, 20, 0.55);
  font-size: 0.95rem;
  line-height: 1.55;
}

.truxcrm-contact h2 {
  max-width: 30rem;
  margin: 0;
  color: var(--tx-blue);
  font-size: clamp(2.25rem, 3.6vw, 3.25rem);
  line-height: 1.02;
}

.truxcrm-contact .text-style-badge {
  width: max-content;
}

.truxcrm-contact-lead {
  max-width: 36rem;
  margin: 0;
  color: rgba(11, 15, 20, 0.62);
  font-size: 1rem;
  line-height: 1.6;
}

.truxcrm-contact-form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.truxcrm-field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.truxcrm-field {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.35rem;
}

.truxcrm-field .form_label {
  color: rgba(11, 15, 20, 0.66);
  font-weight: 500;
}

.truxcrm-field .form_input {
  width: 100%;
  margin: 0;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.truxcrm-field .form_input:focus {
  border-color: var(--tx-blue);
  box-shadow: 0 0 0 3px var(--tx-blue-soft);
  outline: none;
}

.truxcrm-textarea {
  min-height: 6rem;
  padding-top: 0.85rem;
  resize: vertical;
}

/* Errors are announced per field and only occupy space once populated. */
.truxcrm-field-error {
  margin: 0;
  color: #b42318;
  font-size: 0.78rem;
  line-height: 1.4;
}

.truxcrm-field-error:empty {
  display: none;
}

.truxcrm-field .form_input[aria-invalid="true"] {
  border-color: #d92d20;
}

.truxcrm-field .form_input[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px rgba(217, 45, 32, 0.14);
}

.truxcrm-contact-submit {
  min-height: 3.35rem;
  margin-top: 0.35rem;
  padding: 0 1.75rem;
  border: 0;
  border-radius: var(--radius--button, 12px);
  background: var(--tx-blue);
  color: #fff;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    background-color 200ms ease,
    box-shadow 200ms ease,
    transform 200ms ease;
}

.truxcrm-contact-submit:hover {
  background: var(--tx-blue-dark);
  box-shadow: 0 10px 24px rgba(0, 73, 186, 0.28);
  transform: translateY(-1px);
}

.truxcrm-contact-submit:focus-visible {
  outline: 2px solid var(--tx-blue);
  outline-offset: 3px;
}

.truxcrm-contact-submit[disabled] {
  opacity: 0.6;
  cursor: progress;
  transform: none;
}

.truxcrm-contact-fineprint {
  margin: 0;
  color: rgba(11, 15, 20, 0.45);
  font-size: 0.8rem;
}

.truxcrm-form-status {
  margin: 0;
  border-radius: var(--radius--default, 12px);
  font-size: 0.9rem;
  line-height: 1.5;
}

.truxcrm-form-status:empty {
  display: none;
}

.truxcrm-form-status.is-success {
  padding: 1rem 1.1rem;
  border: 1px solid rgba(15, 143, 116, 0.24);
  background: #eefaf5;
  color: #0b6b52;
}

.truxcrm-form-status.is-error {
  padding: 1rem 1.1rem;
  border: 1px solid rgba(217, 45, 32, 0.22);
  background: #fdf1f0;
  color: #8a2018;
}

.truxcrm-form-status a {
  color: inherit;
  font-weight: 600;
}



.truxcrm-contact-card {
  padding: 1.5rem;
  border: 1px solid rgba(11, 15, 20, 0.09);
  border-radius: 1.25rem;
  background: #fff;
}

.truxcrm-contact-card.is-direct {
  border-color: var(--tx-blue-line);
  background: var(--tx-blue-soft);
}

.truxcrm-contact-card h3 {
  margin: 0 0 0.9rem;
  color: #12181f;
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.truxcrm-next-list {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.truxcrm-next-list li {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: 0.7rem;
  align-items: start;
  color: rgba(11, 15, 20, 0.7);
  font-size: 0.9rem;
  line-height: 1.45;
}

.truxcrm-next-index {
  display: grid;
  width: 1.5rem;
  height: 1.5rem;
  place-items: center;
  border-radius: 50%;
  background: var(--tx-blue-soft);
  color: var(--tx-blue);
  font-family: var(--fonts--badge);
  font-size: 0.72rem;
}

.truxcrm-contact-note {
  margin: 0.9rem 0 0;
  color: rgba(11, 15, 20, 0.5);
  font-size: 0.82rem;
  line-height: 1.5;
}

.truxcrm-contact-email {
  display: inline-block;
  color: var(--tx-blue);
  font-size: 1.05rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.truxcrm-contact-email:hover {
  text-decoration: underline;
}

@media (max-width: 991px) {
  .truxcrm-contact-grid {
    grid-template-columns: 1fr;
    gap: 2.75rem;
  }

  .truxcrm-orbit {
    width: min(100%, 16rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .truxcrm-orbit-ring {
    animation: none;
  }

  /* Hold the wordmark rather than flashing between two marks. Both selectors
     carry the class pair on purpose: a running animation outranks a plain
     declaration, so this has to match the specificity that started it. */
  .truxcrm-orbit-logo.is-wordmark,
  .truxcrm-orbit-logo.is-mark {
    animation: none;
  }

  .truxcrm-orbit-logo.is-mark {
    opacity: 0;
  }
}

@media (max-width: 575px) {
  .truxcrm-field-row {
    grid-template-columns: 1fr;
  }

  .truxcrm-contact-submit {
    width: 100%;
  }
}




/* Built visuals ---------------------------------------------------------- */
/* The security page's company-isolation diagram, drawn because the boundary
   between two brokerages is the one control a screenshot cannot show. It runs
   dark on a light page deliberately, and is the only built visual on the site.
   The accent hues carry the argument: one per brokerage, red only at the
   moment a request is refused. */

.tx-mock-isolation {
  --hair: rgba(255, 255, 255, 0.09);
  --accent: #4d8dff;
  --accent-b: #35d0e8;
  --deny: #ff6a5e;
  --ink-text: rgba(255, 255, 255, 0.94);
  --ink-muted: rgba(255, 255, 255, 0.48);
  --wire: rgba(255, 255, 255, 0.2);

  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  gap: 1.15rem;
  padding: 1.6rem;
  border: 1px solid var(--hair);
  border-radius: var(--radius--default, 12px);
  background:
    radial-gradient(115% 85% at 8% -5%, rgba(77, 141, 255, 0.2), transparent 58%),
    radial-gradient(80% 60% at 105% 108%, rgba(53, 208, 232, 0.12), transparent 62%),
    linear-gradient(180deg, #0a0e16, #05070b);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 26px 60px rgba(4, 8, 16, 0.4);
  color: var(--ink-text);
  font-family: var(--fonts--body, Geist, sans-serif);
}

/* A fine machined grid, so the panel has a surface instead of a flat fill. */
.tx-mock-isolation::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    rgba(255, 255, 255, 0.055) 1px,
    transparent 1px
  );
  background-size: 22px 22px;
  opacity: 0.7;
  pointer-events: none;
}

.tx-mock-isolation > * {
  position: relative;
  z-index: 1;
}

.tx-iso-logo {
  width: 7rem;
  height: auto;
  align-self: center;
}

/* The wiring from the mark down into each tenant: one platform, two branches. */
.tx-iso-bus {
  position: relative;
  display: grid;
  /* The panel's own gap sits under this block, so the drop legs are extended
     through it and the wires meet the cards instead of stopping short. */
  height: calc(2.4rem + 1.15rem);
  margin-bottom: -1.15rem;
  grid-template-columns: minmax(0, 1fr) 3.6rem minmax(0, 1fr);
  gap: 1rem;
}

.tx-iso-bus::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  height: 1.1rem;
  border-left: 1px solid var(--wire);
}

.tx-iso-bus > span:not(.tx-iso-bus-gap) {
  position: relative;
}

.tx-iso-bus > span:not(.tx-iso-bus-gap)::before {
  content: "";
  position: absolute;
  top: 1.1rem;
  height: 1px;
  background: var(--wire);
}

.tx-iso-bus > span:not(.tx-iso-bus-gap)::after {
  content: "";
  position: absolute;
  top: 1.1rem;
  bottom: 0;
  left: 50%;
  border-left: 1px solid var(--wire);
}

.tx-iso-bus > span:first-child::before {
  right: -2.3rem;
  left: 50%;
}

.tx-iso-bus > span:last-child::before {
  right: 50%;
  left: -2.3rem;
}

.tx-iso-row {
  display: grid;
  align-items: stretch;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 1rem;
}

.tx-iso-company {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 1.05rem;
  border: 1px solid var(--hair);
  border-radius: var(--radius--default, 12px);
  background: rgba(255, 255, 255, 0.035);
}

/* Each company gets its own hue along the top edge: same platform, two
   separate tenancies. */
.tx-iso-company::before {
  content: "";
  position: absolute;
  top: -1px;
  right: 18%;
  left: 18%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--edge), transparent);
  box-shadow: 0 0 12px var(--edge);
}

.tx-iso-company.is-a {
  --edge: var(--accent);
}

.tx-iso-company.is-b {
  --edge: var(--accent-b);
}

.tx-iso-name {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.tx-iso-name b {
  color: var(--ink-text);
  font-size: 0.9rem;
  font-weight: 620;
  letter-spacing: -0.01em;
}

.tx-iso-name small {
  color: var(--ink-muted);
  font-size: 0.72rem;
}

.tx-iso-records {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  gap: 0.4rem;
  list-style: none;
}

.tx-iso-records li {
  padding: 0.24rem 0.62rem;
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.72rem;
  animation: tx-chip-in 7s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.16s);
}

@keyframes tx-chip-in {
  0%,
  2% {
    opacity: 0;
    transform: translateY(0.35rem);
  }
  12%,
  92% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(0.35rem);
  }
}

/* The wall: a request pulses toward the boundary and is turned back. */
.tx-iso-wall {
  position: relative;
  display: flex;
  width: 3.6rem;
  align-items: center;
  justify-content: center;
}

.tx-iso-wall::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 0;
  border-left: 1px dashed rgba(255, 255, 255, 0.18);
  transform: translateX(-50%);
}

.tx-iso-lock {
  position: relative;
  display: flex;
  width: 2.5rem;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  background: #080c14;
  color: rgba(255, 255, 255, 0.72);
  animation: tx-lock-deny 3.4s ease-in-out infinite;
}

.tx-iso-lock svg {
  width: 1.15rem;
  height: 1.15rem;
}

.tx-iso-pulse {
  position: absolute;
  top: 50%;
  left: 0;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: #dbe8ff;
  box-shadow: 0 0 14px 3px rgba(77, 141, 255, 0.8);
  animation: tx-iso-block 3.4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

@keyframes tx-iso-block {
  0% {
    opacity: 0;
    transform: translate(-0.7rem, -50%) scale(0.6);
  }
  22% {
    opacity: 1;
    transform: translate(0.4rem, -50%) scale(1);
  }
  42% {
    opacity: 1;
    transform: translate(1.1rem, -50%) scale(1);
  }
  50% {
    opacity: 1;
    background: var(--deny);
    box-shadow: 0 0 16px 4px rgba(255, 106, 94, 0.8);
  }
  66% {
    opacity: 0.7;
    background: var(--deny);
    transform: translate(0.1rem, -50%) scale(0.8);
  }
  82%,
  100% {
    opacity: 0;
    transform: translate(-0.7rem, -50%) scale(0.6);
  }
}

@keyframes tx-lock-deny {
  0%,
  40% {
    border-color: rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.72);
    box-shadow: 0 0 0 0 rgba(255, 106, 94, 0);
  }
  52% {
    border-color: rgba(255, 106, 94, 0.75);
    color: #ffb4ad;
    box-shadow:
      0 0 0 0.5rem rgba(255, 106, 94, 0.1),
      0 0 26px rgba(255, 106, 94, 0.5);
  }
  74%,
  100% {
    border-color: rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.72);
    box-shadow: 0 0 0 0 rgba(255, 106, 94, 0);
  }
}

.tx-iso-foot {
  color: var(--ink-muted);
  font-size: 0.8rem;
  line-height: 1.5;
  text-align: center;
}

/* The diagram replaces a screenshot, so it drops the fitted-image treatment. */
.section_features3_details .tx-mock-isolation {
  width: 100%;
}

@media (max-width: 767px) {
  .tx-iso-row {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Stacked, the wall runs across instead of down. */
  .tx-iso-wall {
    width: 100%;
    height: 3rem;
  }

  .tx-iso-wall::before {
    top: 50%;
    right: 0;
    bottom: auto;
    left: 0;
    width: auto;
    height: 0;
    border-top: 1px dashed rgba(255, 255, 255, 0.18);
    border-left: 0;
    transform: translateY(-50%);
  }

  .tx-iso-pulse {
    top: 0;
    left: 50%;
    animation-name: tx-iso-block-vertical;
  }

  @keyframes tx-iso-block-vertical {
    0% {
      opacity: 0;
      transform: translate(-50%, -0.7rem) scale(0.6);
    }
    22% {
      opacity: 1;
      transform: translate(-50%, 0.6rem) scale(1);
    }
    42% {
      opacity: 1;
      transform: translate(-50%, 1.2rem) scale(1);
    }
    50% {
      opacity: 1;
      background: var(--deny);
      box-shadow: 0 0 16px 4px rgba(255, 106, 94, 0.8);
    }
    66% {
      opacity: 0.7;
      background: var(--deny);
      transform: translate(-50%, 0.2rem) scale(0.8);
    }
    82%,
    100% {
      opacity: 0;
      transform: translate(-50%, -0.7rem) scale(0.6);
    }
  }

  .tx-mock-isolation {
    padding: 1.15rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tx-iso-records li,
  .tx-iso-lock,
  .tx-iso-pulse {
    animation: none;
  }

  .tx-iso-pulse {
    opacity: 0;
  }
}

/* Technical controls table ----------------------------------------------- */
/* Term on the left in the template's mono badge, definition on the right,
   separated by the template's own divider. */

.truxcrm-control {
  display: grid;
  align-items: start;
  grid-template-columns: 13rem minmax(0, 1fr);
  gap: 1.5rem 2.5rem;
  padding: 1.25rem 0;
}

.truxcrm-control .text-style-badge {
  justify-self: start;
}

@media (max-width: 767px) {
  .truxcrm-control {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.65rem;
  }
}

/* On a phone the two tenants stack, so the wiring becomes a single stem. */
@media (max-width: 767px) {
  .tx-iso-bus {
    height: 1.6rem;
  }

  .tx-iso-bus::before {
    height: 100%;
  }

  .tx-iso-bus > span::before,
  .tx-iso-bus > span::after {
    display: none;
  }
}

/* Detail points ---------------------------------------------------------- */
/* Ruled lines rather than a checklist. The page already reads as a list of
   ruled rows further down, and a tick beside every claim is the shape a
   generated page takes. */

.truxcrm-points {
  display: flex;
  flex-direction: column;
}

.truxcrm-point {
  padding: 0.8rem 0;
}

/* ======================================================================== */
/* Touch and small-screen refinements                                       */
/* ======================================================================== */
/* Measured on a 390px and a 360px viewport. Two classes of defect came out
   of it: controls too small to hit with a thumb, and labels below the size
   most people can read on a phone.
   
   Tap targets are keyed to `pointer: coarse` rather than a width, because the
   thing that makes a control hard to hit is the finger, not the screen -- a
   phone held in landscape is 900px wide and still needs a big target. */

@media (pointer: coarse) {
  /* Carousel pagination was 8x8. The dots stay visually small; each one gets an
     invisible box around it instead, so the control grows without the design
     changing. The gap widens to keep neighbouring boxes from overlapping --
     two dots sharing a hit area is worse than a small one. */
  .truxcrm-preview-dots {
    gap: 1.4rem;
    padding: 0.5rem 0.9rem;
  }

  .truxcrm-preview-dot {
    position: relative;
  }

  .truxcrm-preview-dot::after {
    position: absolute;
    inset: -18px -11px;
    content: "";
  }

  .truxcrm-view-dot {
    width: 2.75rem;
    height: 2.75rem;
  }

  /* 211x22. Wide enough, but a 22px-tall strip is easy to miss. */
  .truxcrm-feature-link {
    margin-top: 1.15rem;
    padding-block: 0.7rem;
  }

  /* Footer links were 24px tall and stacked close together, which is where
     mis-taps happen most on a long footer. */
  .footer_nav-link {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
  }

  /* 24x24 icons. Centre the icon in a proper target rather than scaling it. */
  .social-link {
    display: inline-flex !important;
    min-width: 2.75rem;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
  }

  /* Feature page tabs were 37px tall. */
  .tabs-link.w-tab-link {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
  }
}

@media (max-width: 47.99rem) {
  /* The product mockups are miniature interfaces, and their smallest labels
     measured 9.3px, which is under what is comfortably readable on a phone.
     Nudged up rather than redesigned: the mockups are sized in rem, so the
     boxes grow with the text instead of clipping it. */
  .truxcrm-status-pill {
    font-size: 0.65rem;
  }

  .truxcrm-order-id,
  .truxcrm-mini-icon {
    font-size: 0.7rem;
  }
}

@media (max-width: 47.99rem) {
  /* The rest of the miniature panel text: the classless spans ("Lead
     captured", "New York, NY", "Driver & pickup details") and the secondary
     lines under each row, measured between 9.9px and 10.9px. The panels are
     sized in rem, so the boxes grow with the text rather than clipping it. */
  .truxcrm-mini-panel small,
  .truxcrm-mini-panel span:not([class]) {
    font-size: 0.72rem;
  }

  /* Two letters inside a 30px circle; it has the room. */
  .truxcrm-route-stop {
    font-size: 0.68rem;
  }
}

@media (pointer: coarse) {
  /* The support address in the footer's fine print was a 16px-tall line. */
  .footer-box .text-size-tiny a {
    display: inline-block;
    padding-block: 0.4rem;
  }
}

@media (max-width: 47.99rem) {
  /* "Confirmed" in the dispatch panel, at 0.64rem. */
  .truxcrm-driver-row strong,
  .truxcrm-driver-row {
    font-size: 0.72rem;
  }

  /* The green state chips: "Ready to send", "Assigned", "Reconciled". */
  .truxcrm-status-pill {
    font-size: 0.72rem;
  }

  /* The tenant-isolation diagram on /security/.
     
     These selectors also exist in inner-pages.css, but /security/ is a
     marketing page and never loads that file -- the first version of this fix
     went there and did nothing. */
  .tx-iso-name small,
  .tx-iso-records li {
    font-size: 0.78rem;
  }
}

/* The ring is a square SVG that spins. A rotating square sweeps a box 1.41x
   its own width, and transformed boxes count toward scrollable overflow, so at
   320px the mark pushed the whole page sideways -- 340px of scroll width in a
   320px viewport. Clipping to the square removes the phantom width; nothing
   visible is lost, because the circle and its text are both inscribed well
   inside the corners it trims. */
.truxcrm-orbit {
  overflow: hidden;
}

@media (max-width: 991px) {
  /* The Solutions panel is a desktop mega-menu shown as-is on phones: its
     sub-links sat inline, separated by dots, at 17px tall. Stacked into rows
     they become ordinary list items you can actually hit. */
  .nav-dropdown-multilayout-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }

  /* The dots only made sense between inline items. */
  .nav-dropdown-multilayout-links .dot {
    display: none;
  }

  .nav-dropdown-multilayout-link {
    display: flex;
    width: 100%;
    min-height: 2.75rem;
    align-items: center;
  }
}