.master-agent-page {
  --ma-orange: #f26a2e;
  --ma-orange-dark: #dc571f;
  --ma-teal: #0e7895;
  --ma-navy: #061a2a;
  --ma-blue: #2f7df4;
  --ma-violet: #7456d8;
}

.ma-eyebrow {
  color: var(--ma-teal);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ma-eyebrow-light {
  color: #78d5dd;
}

.ma-btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--ma-orange);
  --bs-btn-border-color: var(--ma-orange);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--ma-orange-dark);
  --bs-btn-hover-border-color: var(--ma-orange-dark);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--ma-orange-dark);
  --bs-btn-active-border-color: var(--ma-orange-dark);
}

.ma-hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: var(--ma-navy);
  background-image:
    radial-gradient(circle at 105% -10%, rgba(116, 86, 216, 0.58), transparent 34rem),
    radial-gradient(circle at -10% 110%, rgba(14, 120, 149, 0.48), transparent 32rem),
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size:
    auto,
    auto,
    56px 56px,
    56px 56px;
}

.ma-hero h1 {
  max-width: 900px;
  color: #fff;
  font-size: clamp(3.3rem, 6.7vw, 6rem);
  line-height: 0.95;
  letter-spacing: -0.06em;
}

.ma-hero h1 em {
  color: #9dc4ff;
  font-style: normal;
}

.ma-hero-lead {
  max-width: 850px;
  color: #c9d7e3;
}

.ma-reassurance {
  color: #c3d2db;
}

.ma-reassurance i {
  color: #78d5dd;
}

.ma-hero-panel {
  background: rgba(17, 49, 70, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.18);
}

.ma-panel-label {
  color: #9dc4ff;
  letter-spacing: 0.08em;
}

.ma-hero-chain {
  display: grid;
  gap: 0.45rem;
}

.ma-chain-node {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--bs-border-radius-lg);
}

.ma-chain-node > i {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  color: #9dc4ff;
  font-size: 1.4rem;
  background: rgba(47, 125, 244, 0.14);
  border-radius: 50%;
}

.ma-chain-node strong,
.ma-chain-node span {
  display: block;
}

.ma-chain-node strong {
  color: #fff;
}

.ma-chain-node span {
  margin-top: 0.15rem;
  color: #b8cad6;
  font-size: 0.875rem;
}

.ma-chain-node-primary {
  background: rgba(116, 86, 216, 0.2);
  border-color: rgba(157, 196, 255, 0.36);
}

.ma-chain-node-primary > i {
  color: #fff;
  background: var(--ma-violet);
}

.ma-chain-arrow {
  color: #6f93ac;
  line-height: 1;
  text-align: center;
}

.ma-platform-band {
  color: #dcebf4;
  background: rgba(14, 120, 149, 0.22);
  border: 1px solid rgba(120, 213, 221, 0.2);
}

.ma-section {
  padding: clamp(5rem, 8vw, 7rem) 0;
}

.ma-section-title {
  font-size: clamp(2.5rem, 4.6vw, 3.75rem);
  line-height: 1.06;
  letter-spacing: -0.05em;
}

.ma-section-heading {
  max-width: 900px;
}

.ma-sticky-copy {
  position: sticky;
  top: 110px;
}

.ma-card-icon {
  display: block;
  color: var(--ma-teal);
  font-size: 2.7rem;
  line-height: 1;
}

.ma-card-icon-accent {
  color: var(--ma-orange);
}

.ma-intro {
  background: var(--bs-body-bg);
}

.ma-intro-card {
  background: var(--bs-card-bg);
}

.ma-experience-note {
  background: var(--bs-card-bg);
  background: color-mix(in srgb, var(--ma-orange) 7%, var(--bs-card-bg));
  border: 1px solid color-mix(in srgb, var(--ma-orange) 35%, var(--bs-border-color));
  border-left: 4px solid var(--ma-orange);
}

.ma-note-icon {
  color: var(--ma-orange);
  font-size: 3rem;
  line-height: 1;
}

.ma-capabilities {
  background: var(--bs-tertiary-bg);
  background: color-mix(in srgb, var(--ma-blue) 4%, var(--bs-tertiary-bg));
}

.ma-capability-card,
.ma-product-card,
.ma-shot-card {
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.ma-capability-card:hover,
.ma-product-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--ma-blue) 55%, var(--bs-card-border-color));
  box-shadow: var(--bs-box-shadow-sm);
}

.ma-capability-accent {
  background: var(--bs-card-bg);
  background: color-mix(in srgb, var(--ma-violet) 5%, var(--bs-card-bg));
  border-color: color-mix(in srgb, var(--ma-violet) 30%, var(--bs-card-border-color));
}

.ma-mini-list li {
  position: relative;
  padding: 0.45rem 0 0.45rem 1.25rem;
  color: var(--bs-secondary-color);
  border-top: 1px solid var(--bs-border-color);
}

.ma-mini-list li::before {
  position: absolute;
  top: 0.75rem;
  left: 0;
  width: 0.4rem;
  height: 0.4rem;
  content: "";
  background: var(--ma-teal);
  border-radius: 50%;
}

.ma-lifecycle,
.ma-final-cta {
  overflow: hidden;
  background-color: var(--ma-navy);
  background-image:
    radial-gradient(circle at -10% -20%, rgba(47, 125, 244, 0.4), transparent 34rem),
    radial-gradient(circle at 110% 120%, rgba(116, 86, 216, 0.32), transparent 32rem),
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size:
    auto,
    auto,
    60px 60px,
    60px 60px;
}

.ma-dark-copy {
  color: #c3d2db;
}

.ma-process {
  list-style: none;
  background: rgba(17, 49, 70, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.ma-process li {
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  gap: 1rem;
  padding: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.ma-process li:first-child {
  border-top: 0;
}

.ma-process li > span {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  background: var(--ma-violet);
  border-radius: 50%;
}

.ma-process h3 {
  color: #fff;
}

.ma-process p {
  color: #c3d2db;
}

.ma-inventory {
  background: var(--bs-body-bg);
}

.ma-check-list li {
  display: flex;
  gap: 0.75rem;
  padding: 0.8rem 0;
  border-top: 1px solid var(--bs-border-color);
}

.ma-check-list i {
  flex: 0 0 auto;
  margin-top: 0.1rem;
  color: var(--ma-teal);
}

.ma-text-link {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
  color: var(--ma-teal);
  text-decoration: none;
}

.ma-text-link:hover {
  color: var(--ma-orange);
}

.ma-visibility-card {
  background: var(--bs-tertiary-bg);
  background:
    radial-gradient(circle at 100% 0%, rgba(116, 86, 216, 0.13), transparent 22rem),
    color-mix(in srgb, var(--ma-blue) 4%, var(--bs-tertiary-bg));
  border: 1px solid var(--bs-border-color);
}

.ma-visibility-level {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 1rem;
  align-items: center;
  padding: 1.25rem 0;
  border-top: 1px solid var(--bs-border-color);
}

.ma-visibility-level:first-child {
  border-top: 0;
}

.ma-visibility-level > span {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  background: var(--ma-teal);
  border-radius: 50%;
}

.ma-visibility-level strong,
.ma-visibility-level small {
  display: block;
}

.ma-visibility-level small {
  margin-top: 0.15rem;
  color: var(--bs-secondary-color);
}

.ma-product-views {
  background: var(--bs-tertiary-bg);
}

.ma-shot-frame {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #071c2d;
  border: 1px solid #244866;
  border-radius: var(--bs-border-radius-lg);
}

.ma-shot-standard {
  aspect-ratio: 16 / 10;
}

.ma-shot-helpdesk {
  aspect-ratio: 4 / 3;
}

.ma-shot-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #071c2d;
}

.ma-integrations {
  background: var(--bs-body-bg);
}

.ma-integration-item {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 1rem;
  height: 100%;
  padding: 1.25rem;
  background: var(--bs-card-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius-lg);
}

.ma-integration-item > i {
  color: var(--ma-teal);
  font-size: 1.75rem;
}

.ma-products {
  background: var(--bs-tertiary-bg);
  background: color-mix(in srgb, var(--ma-violet) 4%, var(--bs-tertiary-bg));
}

.ma-proof {
  background: var(--bs-body-bg);
}

.ma-stat {
  padding: 1.5rem 1rem;
  background: var(--bs-card-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius-lg);
}

.ma-stat strong,
.ma-stat span {
  display: block;
}

.ma-stat strong {
  margin-bottom: 0.5rem;
  color: var(--ma-teal);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1;
}

.ma-stat span {
  color: var(--bs-secondary-color);
  font-size: 0.85rem;
}

.ma-logo-panel {
  background: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color);
}

.ma-customer-logo {
  width: auto;
  max-width: 180px;
  max-height: 70px;
  object-fit: contain;
}

.ma-faq {
  background: var(--bs-tertiary-bg);
  background: color-mix(in srgb, var(--ma-violet) 4%, var(--bs-tertiary-bg));
}

.ma-faq-list details {
  border-bottom: 1px solid var(--bs-border-color);
}

.ma-faq-list summary {
  color: var(--bs-heading-color);
  cursor: pointer;
  list-style: none;
}

.ma-faq-list summary::-webkit-details-marker {
  display: none;
}

.ma-faq-list summary i {
  flex: 0 0 auto;
  margin-top: 0.25rem;
  transition: transform 180ms ease;
}

.ma-faq-list details[open] summary i {
  transform: rotate(45deg);
}

.ma-final-cta {
  background-color: var(--ma-navy);
}

.ma-cta-icon {
  color: #9dc4ff;
  font-size: 4rem;
  line-height: 1;
}

/* Optional spacing level used by the page */
@media (min-width: 992px) {
  .py-lg-6 {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
  }
}

@media (max-width: 991.98px) {
  .ma-sticky-copy {
    position: static;
  }

  .ma-hero h1 {
    font-size: clamp(3rem, 12vw, 5rem);
  }
}

@media (max-width: 575.98px) {
  .ma-process li {
    grid-template-columns: 1fr;
  }

  .ma-shot-standard,
  .ma-shot-helpdesk {
    aspect-ratio: 4 / 3;
  }

  .ma-customer-logo {
    max-width: 150px;
    max-height: 60px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ma-capability-card,
  .ma-product-card,
  .ma-shot-card,
  .ma-faq-list summary i {
    transition: none;
  }

  .ma-capability-card:hover,
  .ma-product-card:hover {
    transform: none;
  }
}

.ma-product-label {
  color: var(--ma-teal);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ma-product-features {
  color: var(--bs-secondary-color);
  font-size: 0.9rem;
}

.ma-product-features li {
  display: flex;
  gap: 0.6rem;
  padding: 0.45rem 0;
  border-top: 1px solid var(--bs-border-color);
}

.ma-product-features li:first-child {
  border-top: 0;
}

.ma-product-features i {
  flex: 0 0 auto;
  margin-top: 0.1rem;
  color: var(--ma-teal);
}

.ma-product-card-featured {
  background: color-mix(in srgb, var(--ma-teal) 5%, var(--bs-card-bg));
  border-color: color-mix(in srgb, var(--ma-teal) 35%, var(--bs-card-border-color));
}

.ma-enterprise-product-card {
  background: color-mix(in srgb, var(--ma-violet) 5%, var(--bs-card-bg));
  border-color: color-mix(in srgb, var(--ma-violet) 30%, var(--bs-card-border-color));
}

.ma-products-note {
  background: var(--bs-card-bg);
  border: 1px solid var(--bs-border-color);
  border-left: 4px solid var(--ma-orange);
}

/* Full-width product screenshots.
   Keep these AFTER the existing .ma-shot-frame and .ma-shot-frame img rules. */

.ma-shot-frame.ma-shot-full {
  display: block;
  aspect-ratio: auto;
}

.ma-shot-frame.ma-shot-full img {
  position: static;
  inset: auto;
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  background: transparent;
}

.ma-shot-copy {
  max-width: 980px;
}

.ma-dealer-billing {
  background: color-mix(in srgb, var(--ma-orange) 4%, var(--bs-tertiary-bg));
}

.ma-billing-card {
  background: var(--bs-card-bg);
  border-color: color-mix(in srgb, var(--ma-teal) 25%, var(--bs-card-border-color));
}