/* Approved distributors page: additions to styles.css */

.ds { padding: 130px 0 clamp(64px, 9vw, 120px); min-height: calc(100svh - 110px); }
.ds__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 32px; align-items: end; margin-bottom: clamp(32px, 5vw, 56px); }
.ds .hero__title { font-size: clamp(38px, 6vw, 86px); }
.ds .hero__title .line { white-space: nowrap; }
.ds__lede { margin: 0; color: var(--ink-2); }

.ds__list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.dr { display: grid; grid-template-columns: 260px minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 30px 0; border-bottom: 1px solid var(--rule); }
/* each logo sits on the background it was drawn for */
.dr__logo { display: grid; place-items: center; height: 120px; padding: 20px 24px; background: var(--white); border: 1px solid var(--rule); }
.dr__logo--dark { background: var(--ink); border-color: var(--ink); }
.dr__logo img { width: auto; max-width: 100%; max-height: 64px; }
.dr h2 { font-size: clamp(28px, 3.8vw, 56px); font-variation-settings: "wdth" 116; }
.dr__tag { margin: 12px 0 0; display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--ink); font-size: 10px; letter-spacing: .1em; }
.dr__tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }

.ds__join { margin-top: clamp(48px, 7vw, 96px); padding: clamp(22px, 3vw, 36px); background: var(--white); border: 1px solid var(--rule); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 24px; align-items: center; }
.ds__join .eyebrow { margin-bottom: 12px; }
.ds__join h2 { font-size: clamp(24px, 2.6vw, 36px); text-transform: none; font-variation-settings: "wdth" 108; letter-spacing: -.01em; line-height: 1; }
.ds__join p:not(.eyebrow) { margin: 0; color: var(--ink-2); }

@media (max-width: 1000px) {
  .ds { padding-top: 104px; }
  .ds__head { grid-template-columns: 1fr; }
  .ds__join { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .dr { grid-template-columns: 1fr; gap: 14px; padding: 24px 0; }
  .dr__logo { height: 96px; }
  .dr .btn { justify-self: start; }
}