/* Humenta Select
   Extends the Kinetic design system in /styles.css and the shared components in
   /aeo/aeo.css. Loaded last on every /select/ page. Tokens come from /styles.css. */

/* Qualified speed statement on /select/hire/. The tagline never appears without
   its qualifier, and both stay inside the first viewport under the H1. */
.select-speed {
  border-inline-start: 0.2rem solid var(--accent-human);
  display: grid;
  gap: var(--space-2xs);
  margin-block-end: var(--space-md);
  max-inline-size: var(--measure-copy);
  padding-block: var(--space-2xs);
  padding-inline-start: var(--space-sm);
}

.select-speed strong {
  color: var(--text-primary);
  font-size: var(--type-2xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.select-speed span {
  color: var(--text-secondary);
  font-size: var(--type-sm);
  line-height: 1.5;
}

/* Deep links from other pages must land clear of the fixed nav and the sticky
   section nav. The legacy #mandate anchor sits at the start of the request
   content, one section gap below the section edge. */
#hiring-request,
#choose-model,
#choose-leader {
  scroll-margin-block-start: var(--space-xl);
}

#hiring-request > #mandate {
  scroll-margin-block-start: calc(var(--space-3xl) + var(--space-lg));
}

@media (max-width: 38rem) {
  .select-speed {
    margin-block-end: var(--space-sm);
    padding-block: 0;
  }

  .select-speed strong {
    font-size: var(--type-lg);
  }
}