.tracks3{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: start; }
@media (max-width: 980px){ .tracks3{ grid-template-columns: 1fr; } }

.tcard{
  background: var(--bg-card); border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--border-soft); display:flex; flex-direction:column;
  scroll-margin-top: 100px;
}
.tcard-head{ padding: 24px 24px 20px; border-bottom: 1px solid var(--border-soft); }
.tcard-head .kicker{ font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; display:block; }
.tcard-head h3{ font-size: 19px; }

.tcard.iot .kicker{ color: var(--iot); }
.tcard.embedded .kicker{ color: var(--embedded); }
.tcard.robotics .kicker{ color: var(--robotics); }
.tcard.iot .tcard-head{ background: linear-gradient(180deg, var(--iot-soft), transparent); }
.tcard.embedded .tcard-head{ background: linear-gradient(180deg, var(--embedded-soft), transparent); }
.tcard.robotics .tcard-head{ background: linear-gradient(180deg, var(--robotics-soft), transparent); }

.tcard-body{ padding: 22px 24px 26px; display:flex; flex-direction:column; gap: 22px; }

.subhead{ display:flex; align-items:center; justify-content:space-between; cursor:pointer; }
.subhead h4{ font-size: 13.5px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-hi); font-family: var(--font-body); font-weight: 700; }
.subhead .chev{ transition: transform .2s ease; color: var(--text-dim); }
.subhead[aria-expanded="false"] + .syllabus-list{ display:none; }
.subhead[aria-expanded="false"] .chev{ transform: rotate(-90deg); }

.syllabus-list{ display:flex; flex-direction:column; gap: 9px; margin-top: 12px; }
.syllabus-list li{ font-size: 13.5px; color: var(--text-mid); display:flex; gap:8px; }
.syllabus-list li::before{ content:"—"; color: var(--text-dim); flex-shrink:0; }

.spotlight-imgs{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.spotlight-imgs .ph{
  aspect-ratio: 4/3; border-radius: 10px; border: 1px solid var(--border-soft);
  background-size: cover; background-position: center;
  display:flex; align-items:flex-end; padding:8px;
}

.instructor{ display:flex; align-items:center; gap: 12px; margin-top: 12px; }
.instructor .avatar{
  width: 46px; height: 46px; border-radius: 50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-weight:700; color:#fff; font-family: var(--font-display);
  font-size: 12px; letter-spacing: -0.3px;
}
.instructor .name{ font-size: 14px; font-weight: 700; color: var(--text-hi); }
.instructor .role{ font-size: 12px; color: var(--text-dim); }

.tcard.iot .avatar{ background: linear-gradient(145deg, var(--iot), #1c6fbf); }
.tcard.embedded .avatar{ background: linear-gradient(145deg, var(--embedded), #6c3ec9); }
.tcard.robotics .avatar{ background: linear-gradient(145deg, var(--robotics), #159c62); }

.outcomes{ display:flex; flex-direction:column; gap: 8px; margin-top: 12px; }
.outcomes li{ display:flex; align-items:flex-start; gap: 8px; font-size: 13.5px; color: var(--text-mid); }
.outcomes .tick{ width:16px; height:16px; border-radius:50%; flex-shrink:0; margin-top:1px; display:flex; align-items:center; justify-content:center; }
.tcard.iot .outcomes .tick{ background: var(--iot-soft); color: var(--iot); }
.tcard.embedded .outcomes .tick{ background: var(--embedded-soft); color: var(--embedded); }
.tcard.robotics .outcomes .tick{ background: var(--robotics-soft); color: var(--robotics); }

.tcard-foot{ padding: 0 24px 26px; margin-top: auto; }