/* The outline card HD Learn adds under a course's description on its public page. */
.hdlrn-cc { --hc-a: #136fa5; --hc-n: #001b44; margin: 2em 0; padding: 0; border-radius: 18px; background: #fff; box-shadow: 0 1px 2px rgba(0, 27, 68, .05), 0 14px 32px -20px rgba(0, 27, 68, .4); overflow: hidden; font-size: 16px; }
.hdlrn-cc .hdlrn-i { flex: none; }
.hdlrn-cc__bar { display: flex; flex-wrap: wrap; gap: 12px 20px; justify-content: space-between; align-items: center; padding: 18px 22px; background: linear-gradient(120deg, var(--hc-n), #16466f); color: #fff; }
.hdlrn-cc__facts { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.hdlrn-cc__facts span { display: inline-flex; gap: 6px; align-items: center; opacity: .92; }
.hdlrn-cc__price { padding: 3px 12px; border-radius: 999px; background: rgba(255, 255, 255, .16); font-weight: 600; opacity: 1 !important; }
.hdlrn-cc__go { display: inline-flex; gap: 8px; align-items: center; padding: 11px 20px; border-radius: 999px; background: #ff6b4a; color: var(--hc-n) !important; font-weight: 600; text-decoration: none !important; transition: transform .2s, box-shadow .2s; }
.hdlrn-cc__go:hover { transform: translateY(-1px); box-shadow: 0 0 0 5px rgba(255, 107, 74, .25); }
.hdlrn-cc__unit { padding: 6px 22px 14px; }
.hdlrn-cc__unit + .hdlrn-cc__unit { border-top: 1px solid #e6ecf1; }
.hdlrn-cc__unit h3 { margin: 14px 0 6px; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; color: #5a6172; }
.hdlrn-cc ol { list-style: none; margin: 0; padding: 0; }
.hdlrn-cc li { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; padding: 9px 0; border-bottom: 1px dashed #e6ecf1; }
.hdlrn-cc li:last-child { border-bottom: 0; }
.hdlrn-cc li > .hdlrn-i { color: var(--hc-a); }
.hdlrn-cc li span { flex: 1; min-width: 12em; color: var(--hc-n); }
.hdlrn-cc li small { color: #5a6172; }
.hdlrn-cc__sample { padding: 2px 10px; border-radius: 999px; background: #e3f5ea; color: #1f6b3c !important; font-size: 13px; font-weight: 600; text-decoration: none !important; }