/* Lsany for teams (/courses/business/): the course page, sold by conversation. Only the industry grid is new. */
.tm-packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.tm-pack { display: flex; flex-direction: column; overflow: hidden; border-radius: 26px; background: #fff; color: var(--ink); text-decoration: none; box-shadow: var(--soft-lg, 0 24px 48px -28px rgba(43, 21, 0, .35)); transition: transform .35s var(--spring, ease), box-shadow .35s; }
.tm-pack:hover { transform: translateY(-4px); }
.tm-pack img { display: block; width: 100%; height: auto; aspect-ratio: 1000 / 558; object-fit: cover; }
.tm-pack-copy { display: block; padding: 16px 18px 18px; }
.tm-pack-copy b { display: block; font-family: var(--f-disp); font-weight: 700; font-size: 16px; letter-spacing: -.02em; line-height: 1.25; }
.tm-pack-copy small { display: block; margin-top: 6px; font-size: 13.5px; font-weight: 500; line-height: 1.4; color: var(--ink-soft); }
.tm-pack:focus-visible { outline: 3px solid var(--sea); outline-offset: 3px; }
@media (max-width: 640px) {
  .tm-packs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .tm-pack { border-radius: 20px; }
  .tm-pack-copy { padding: 12px 12px 14px; }
  .tm-pack-copy b { font-size: 14px; }
  .tm-pack-copy small { display: none; }
}

/* "Your team," has a comma that drops into the i-dot of the next line at .98; open the hero lines a touch. */
.tm-page .cs-hero .hero-title { line-height: 1.08; }

/* Business hero: the owner's calm UAE office (images/business/hero-office.webp) in place of the course page's coast. */
.tm-page .cs-hero { background:
  linear-gradient(90deg, rgba(255, 251, 242, .55) 0%, rgba(255, 251, 242, .25) 43%, rgba(255, 251, 242, 0) 68%),
  url('/images/business/hero-office.webp') center / cover no-repeat;
  background-color: var(--paper); }