/* Sector directory: concrete examples of work a custom application can support. */
.sectors-section .section-heading { align-items: end; }
.sector-directory { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 5vw, 72px); border-top: 1px solid var(--line); }
.sector-item { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: start; gap: 20px; min-width: 0; padding-block: 30px; border-bottom: 1px solid var(--line); }
.sector-icon { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid #e4e7ec; border-radius: 7px; background: #f5f7f9; color: #424653; }
.sector-item > div { min-width: 0; }
.sector-item h3 { margin: 0 0 6px; color: var(--deep); font-size: 18px; font-weight: 600; line-height: 1.4; letter-spacing: -.025em; }
.sector-trades { display: block; margin-bottom: 14px; color: #6d737c; font-size: 11px; line-height: 1.7; }
.sector-item p { max-width: 53ch; margin: 0; color: #424653; font-size: 13px; line-height: 1.85; }
.sectors-footer { display: flex; align-items: center; justify-content: space-between; gap: 24px 48px; padding-top: 28px; }
.sectors-footer p { max-width: 65ch; margin: 0; color: #6d737c; font-size: 11px; line-height: 1.8; }
.sectors-footer .text-link { flex-shrink: 0; font-size: 12px; }
@media (max-width: 1000px) {
  .sector-directory { column-gap: 32px; }
  .sector-item { grid-template-columns: 36px minmax(0, 1fr); gap: 16px; padding-block: 26px; }
  .sector-icon { width: 36px; height: 36px; }
  .sector-item h3 { font-size: 17px; }
}
@media (max-width: 700px) {
  .sector-directory { grid-template-columns: minmax(0, 1fr); }
  .sector-item { padding-block: 24px; }
  .sector-item p { max-width: 62ch; font-size: 14px; }
  .sector-trades { margin-bottom: 10px; }
  .sectors-footer { align-items: flex-start; flex-direction: column; gap: 16px; padding-top: 24px; }
}