/* ─── SUBPAGES IN THE HOMEPAGE LOOK ──────────────────────────────────
   for-companies and for-specialists: the character field behind the hero,
   fog in the closing band, dot rings behind the cards, and the model cards
   as plain documents (tinted tag, hairline rows) like the homepage mock-ups. */

.page-hero { border-bottom: 0; padding-top: calc(var(--nav-h) + 112px); }
@media (max-width: 600px) { .page-hero { padding-top: calc(var(--nav-h) + 64px); } }

.cta-band { border-top: 0; background: var(--bg); position: relative; }
.cta-band-inner { position: relative; z-index: 1; }

/* Model cards: tinted tag cycling the pastels, serif title, hairline facts. */
.model { border-radius: 18px; box-shadow: 0 1px 2px rgba(20, 20, 19, .04), 0 22px 50px -34px rgba(20, 20, 19, .3); position: relative; }
.model-tag {
  align-self: flex-start;
  font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 8px;
  color: var(--ms-blue-ink);
  background: color-mix(in srgb, var(--ms-blue) 22%, #fff);
  border: 1px solid color-mix(in srgb, var(--ms-blue) 60%, #fff);
}
.model-grid > .model:nth-child(4n+2) .model-tag { color: var(--ms-green-ink);  background: color-mix(in srgb, var(--ms-green) 24%, #fff);  border-color: color-mix(in srgb, var(--ms-green) 62%, #fff); }
.model-grid > .model:nth-child(4n+3) .model-tag { color: var(--ms-yellow-ink); background: color-mix(in srgb, var(--ms-yellow) 26%, #fff); border-color: color-mix(in srgb, var(--ms-yellow) 66%, #fff); }
.model-grid > .model:nth-child(4n+4) .model-tag { color: var(--ms-red-ink);    background: color-mix(in srgb, var(--ms-red) 22%, #fff);    border-color: color-mix(in srgb, var(--ms-red) 60%, #fff); }
.model h3 { font-weight: 400; font-size: clamp(20px, 2.15vw, 23px); letter-spacing: -.015em; }
.model dl { background: none; border-radius: 0; gap: 0; }
.model dl > div { background: none; padding: 11px 0; border-top: 1px solid var(--border); }
.model dt { font-family: var(--sans); font-size: 13px; }
.model.highlight { border-color: var(--border); }

.aside-band, .partner-assurance, .founding-band { border-radius: 18px; position: relative; }
.assurance strong { font-family: var(--serif); font-weight: 400; font-size: 18px; letter-spacing: -.01em; }

/* Dot rings behind the card groups, as on the homepage. */
.model-grid, .aside-band, .founding-band { position: relative; }
.model-grid::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  inset: -14% -10%;
  background-image: radial-gradient(rgba(20, 20, 19, .16) 1px, transparent 1.4px);
  background-size: 9px 9px;
  -webkit-mask-image: radial-gradient(closest-side, transparent 55%, #000 72%, transparent 98%);
  mask-image: radial-gradient(closest-side, transparent 55%, #000 72%, transparent 98%);
}
.section > .model-grid, .section > .founding-band { isolation: auto; }