/* ==========================================================================
   Solutions page only. Loaded after css/styles.css.
   Do not put shared component styles here.
   ========================================================================== */

/* --- Hero: six team names read as jump pills to the "choose a team" cards --- */

.nicholii-teampills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.nicholii-teampill {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border: 1px solid rgba(37, 37, 37, 0.18);
  border-radius: 999px;
  color: var(--color-base-base-dark-100);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.nicholii-teampill:hover,
.nicholii-teampill:focus-visible {
  background-color: var(--color-base-base-dark-100);
  border-color: var(--color-base-base-dark-100);
  color: var(--color-base-cream);
}

.nicholii-teampill:focus-visible {
  outline: 2px solid var(--color-base-forest);
  outline-offset: 2px;
}

/* Pills on a sage panel, should the hero ever move onto one */
.nicholii-sage .nicholii-teampill {
  border-color: rgba(247, 247, 245, 0.32);
  color: var(--color-base-base-light-100);
}

.nicholii-sage .nicholii-teampill:hover,
.nicholii-sage .nicholii-teampill:focus-visible {
  background-color: var(--color-base-base-light-100);
  border-color: var(--color-base-base-light-100);
  color: var(--color-base-base-dark-100);
}

/* Landing point for the team anchors, clear of the fixed navbar */
.nicholii-faq_item {
  scroll-margin-top: 120px;
}

/* --- Ask / Triage / Act / Escalate: numbered four-step cards --- */

.nicholii-vcard_head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.nicholii-vcard_step {
  font-family: var(--typography-font-family-label-2);
  font-size: var(--typography-size-label-2);
  line-height: var(--typography-line-height-label-2);
  font-weight: var(--typography-font-weight-label-2);
  letter-spacing: var(--typography-letter-spacing-label-2);
  color: var(--color-base-forest);
}

@media screen and (max-width: 767px) {
  .nicholii-vcard_head { gap: 10px; }
  .nicholii-teampill { padding: 7px 12px; }
}

@media screen and (max-width: 479px) {
  .nicholii-teampills { gap: 6px; }
  .nicholii-teampill { white-space: normal; }
}