/* ============================================================================
   Solutions for Digital Marketers page (ID 606, template-native.php)
   Page-only layout helpers. Scoped to .premium-main so nothing leaks.
   Most of the page uses shared .ns-* components; these cover the few
   layouts the system does not have a canonical class for.
   ========================================================================== */

/* 2-up grid for the two revenue model cards */
.premium-main .dm-grid2 {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 600px) {
  .premium-main .dm-grid2 { grid-template-columns: repeat(2, 1fr); }
}

/* 3-up grid for the how-it-works steps */
.premium-main .dm-grid3 {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .premium-main .dm-grid3 { grid-template-columns: repeat(3, 1fr); }
}

/* Numbered step chip — gradient pill, mirrors .ag-step__num */
.premium-main .dm-step__num {
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-weight: 700;
  color: #fff;
  background: var(--grad-brand);
  margin-bottom: var(--space-4);
  flex-shrink: 0;
}

/* Small descriptor tag beneath the card title on the model cards */
.premium-main .dm-model-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--periwinkle);
  margin-bottom: var(--space-4);
}

/* Model cards: make the ns-list inside feel at home */
.premium-main .dm-grid2 .ns-card .ns-list {
  margin-top: var(--space-4);
}

/* Periwinkle line-icons in bento tiles */
.premium-main .ns-bento__icon {
  color: var(--periwinkle);
}