/* Public-site visual cleanup: neutral accents and a calmer type scale.
   Success states remain green; decorative accents stay monochrome. */

:root {
  --mc-public-accent: #17191d;
  --mc-public-accent-soft: #f5f5f5;
  --mc-public-accent-border: #e2e4e7;
  --mc-friendly-green: var(--mc-public-accent);
  --mc-friendly-green-strong: var(--mc-public-accent);
  --mc-friendly-green-soft: var(--mc-public-accent-soft);
  --mc-friendly-green-border: var(--mc-public-accent-border);
}

/* Remove decorative green from the marketing surface. */
.mc-dev-hero {
  background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%) !important;
}

.mc-dev-hero-meta i {
  background: #17191d !important;
  box-shadow: 0 0 0 3px rgba(23, 25, 29, 0.08) !important;
}

.mc-commerce-live {
  border-color: #dedfe2 !important;
  background: #f6f6f6 !important;
  color: #3f4248 !important;
}
.mc-commerce-live i {
  background: #62666d !important;
  box-shadow: 0 0 0 3px rgba(98, 102, 109, 0.09) !important;
}
.mc-commerce-event > svg {
  color: #45484e !important;
}

.mc-dev-primitive > span,
.mc-feature-icon,
.mc-home-resource-grid > a > div {
  border-color: #e1e3e6 !important;
  background: #f6f6f6 !important;
  color: #202329 !important;
}

.mc-arch-node.dark {
  border-color: #dfe1e4 !important;
  background: #f3f4f5 !important;
  color: #17191d !important;
}
.mc-arch-node.dark span {
  color: #656a72 !important;
}

.mc-dev-quickstart {
  border-top-color: #e4e6e8 !important;
  border-bottom-color: #e4e6e8 !important;
  background: linear-gradient(180deg, #fafafa, #f5f5f5) !important;
}
.mc-dev-quickstart-steps article {
  border-color: #e0e2e5 !important;
}
.mc-dev-quickstart-steps code {
  border-color: #dfe1e4 !important;
  background: #f3f4f5 !important;
  color: #40444a !important;
}

/* Keep green only where it communicates a real success state. */
.mc-commerce-icon.is-success,
.mc-commerce-badge {
  border-color: #cce8d7 !important;
  background: #eef8f1 !important;
  color: #185f39 !important;
}

/* More conventional public-site typography. */
.mc-dev-hero-copy h1 {
  max-width: 620px !important;
  font-size: clamp(40px, 3.65vw, 54px) !important;
  line-height: 1.045 !important;
  letter-spacing: -0.045em !important;
}
.mc-dev-hero-copy > p {
  max-width: 600px !important;
  font-size: clamp(15px, 1.15vw, 17px) !important;
  line-height: 1.62 !important;
}

.mc-section-heading h2 {
  max-width: 820px;
  font-size: clamp(30px, 3vw, 42px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.04em !important;
}
.mc-section-heading p {
  max-width: 760px;
  font-size: 15.5px !important;
  line-height: 1.65 !important;
}

.mc-dev-quickstart h2,
.mc-cta h2 {
  font-size: clamp(30px, 3vw, 42px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.04em !important;
}

.devhub-hero h1,
.sec-hero h1 {
  font-size: clamp(38px, 4vw, 56px) !important;
  line-height: 1.03 !important;
  letter-spacing: -0.048em !important;
}

.mc-dev-primitive h3,
.mc-feature h3 {
  font-size: 17px !important;
}

@media (max-width: 760px) {
  .mc-dev-hero-copy h1 {
    font-size: clamp(34px, 9vw, 44px) !important;
    line-height: 1.06 !important;
  }
  .mc-section-heading h2,
  .mc-dev-quickstart h2,
  .mc-cta h2 {
    font-size: clamp(28px, 7.5vw, 36px) !important;
    line-height: 1.1 !important;
  }
  .devhub-hero h1,
  .sec-hero h1 {
    font-size: clamp(34px, 9vw, 44px) !important;
    line-height: 1.05 !important;
  }
}

@media (max-width: 380px) {
  .mc-dev-hero-copy h1 {
    font-size: 32px !important;
  }
}