.mc-merchant-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.mc-home-resources { background: color-mix(in oklab, var(--surface-2) 65%, white); border-bottom: 1px solid var(--border); }
.mc-home-resource-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 56px; }
.mc-home-resource-grid > a { min-height: 310px; padding: 32px; display: flex; flex-direction: column; border: 1px solid color-mix(in oklab, var(--border-strong) 72%, var(--border)); border-radius: 16px; background: var(--surface); box-shadow: var(--mc-elevated-shadow, 0 1px 2px rgba(15, 23, 42, .04), 0 14px 38px rgba(15, 23, 42, .07)); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.mc-home-resource-grid > a:hover { transform: translateY(-3px); border-color: var(--border-strong); box-shadow: var(--mc-elevated-shadow-hover, 0 3px 10px rgba(15, 23, 42, .07), 0 24px 66px rgba(15, 23, 42, .10)); }
.mc-home-resource-grid > a > div { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.mc-home-resource-grid > a > div svg { width: 21px; height: 21px; }
.mc-home-resource-grid h3 { margin: 36px 0 11px; font-size: 22px; line-height: 1.2; letter-spacing: -.03em; }
.mc-home-resource-grid p { margin: 0 0 26px; color: var(--muted); font-size: 15.5px; line-height: 1.72; }
.mc-home-resource-grid > a > span { margin-top: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 670; }

/* Quiet audience proof under the hero copy. It should read like product context, not a logo wall. */
.mc-audience-proof {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  margin-top: 22px;
  padding: 8px 11px;
  border: 1px solid color-mix(in oklab, var(--border) 82%, transparent);
  border-radius: 999px;
  background: color-mix(in oklab, var(--surface-2) 54%, transparent);
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.35;
}
.mc-audience-proof strong { color: color-mix(in oklab, var(--foreground) 84%, var(--muted)); font-weight: 620; }
.mc-audience-proof i { width: 3px; height: 3px; flex: 0 0 3px; border-radius: 50%; background: color-mix(in oklab, var(--muted) 55%, transparent); }

/* The infrastructure and developer sections should read like product UI, not tiny diagram annotations. */
.mc-concept h3 { font-size: 17px; line-height: 1.25; }
.mc-concept p { font-size: 14.5px; line-height: 1.68; }
.mc-arch-label { font-size: 11px; }
.mc-arch-node { padding: 15px 16px; font-size: 14px; }
.mc-arch-node span { font-size: 11px; }
.mc-arch-branches span { padding: 11px 6px; font-size: 10px; line-height: 1.35; }
.mc-inline-list span { padding: 8px 10px; font-size: 12px; }
.mc-text-link { font-size: 14px; }
.mc-code-tabs { font-size: 12px; }
.mc-code-card pre { font-size: 12.5px; line-height: 1.8; }
.mc-trust-strip { font-size: 13px; line-height: 1.4; }
.mc-tertiary { font-size: 14px; }

@media (max-width: 900px) {
  .mc-home-resource-grid { grid-template-columns: 1fr; }
  .mc-home-resource-grid > a { min-height: 0; }
}

@media (max-width: 640px) {
  .mc-merchant-actions { flex-direction: column; }
  .mc-merchant-actions .mc-button { width: 100%; }
  .mc-home-resource-grid > a { padding: 24px; }
  .mc-home-resource-grid h3 { margin-top: 28px; font-size: 20px; }
  .mc-home-resource-grid p { font-size: 15px; }
  .mc-audience-proof { width: 100%; padding: 10px 12px; border-radius: 12px; gap: 7px; }
  .mc-audience-proof span { width: 100%; font-size: 11.5px; }
  .mc-arch-node { align-items: flex-start; gap: 8px; }
  .mc-arch-branches { grid-template-columns: 1fr 1fr; }
  .mc-arch-branches::before,
  .mc-arch-branches span::before { display: none; }
  .mc-trust-strip { flex-wrap: wrap; gap: 10px 12px; }
}