/* Free course page. Same look as the home hero: navy ink, a cyan to blue accent, glass-light surfaces, 10 / 14 / 20 / pill radii.
   Layout follows a mature course page: wide column, sticky enrol card on the right, quiet section rules, one heading style. */
.fc {
    --fc-ink: #0f1b2d; --fc-body: #46566b; --fc-muted: #6b7c91;
    --fc-a: #0891b2; --fc-b: #2563eb; --fc-a-ink: #0b6f8c;
    --fc-grad: linear-gradient(135deg, #0891b2, #2563eb);
    --fc-bg: #ffffff; --fc-surface: #f4f8fc; --fc-panel: #ffffff; --fc-line: rgba(20, 90, 140, .14);
    --fc-soft: rgba(8, 145, 178, .1); --fc-ok: #1f9d6e;
    --fc-sh: 0 1px 2px rgba(15, 60, 100, .06), 0 14px 34px -18px rgba(15, 80, 130, .3);
    --fc-sh2: 0 2px 4px rgba(15, 60, 100, .08), 0 30px 56px -24px rgba(15, 80, 130, .5);
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: var(--fc-body);
    background: var(--fc-bg);
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}
[data-bs-theme="dark"] .fc {
    --fc-ink: #eef7ff; --fc-body: #b4c6d9; --fc-muted: #7f95ab;
    --fc-a: #2fb8d6; --fc-b: #3b82f6; --fc-a-ink: #7fd6ec;
    --fc-bg: #050f1d; --fc-surface: #08182b; --fc-panel: #0c2038; --fc-line: rgba(110, 190, 230, .16);
    --fc-soft: rgba(47, 184, 214, .14); --fc-ok: #5cd1a3;
    --fc-sh: 0 1px 2px rgba(0, 0, 0, .4), 0 14px 34px -18px rgba(0, 0, 0, .8);
    --fc-sh2: 0 2px 4px rgba(0, 0, 0, .5), 0 30px 56px -24px rgba(0, 0, 0, .9);
}
html:has(.fc) { scroll-behavior: smooth; }
.fc *, .fc *::before, .fc *::after { box-sizing: border-box; }
.fc a { text-decoration: none; }
.fc :focus-visible { outline: 2px solid var(--fc-a); outline-offset: 3px; }
.fc-wrap { width: min(100% - 40px, 1240px); margin-inline: auto; }

/* ---------- buttons ---------- */
.fc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 28px; border: 1px solid transparent; border-radius: 999px; font: inherit; font-size: .975rem; font-weight: 700; white-space: nowrap; cursor: pointer; transition: transform .2s cubic-bezier(.2, .7, .2, 1), box-shadow .25s, background-color .2s, color .2s; }
.fc-btn--primary { background: var(--fc-grad); color: #fff !important; box-shadow: 0 12px 26px -12px rgba(8, 145, 178, .8); }
.fc-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 18px 32px -14px rgba(37, 99, 235, .8); }
.fc-btn--primary:active { transform: scale(.985); }
.fc-btn--ghost { border-color: var(--fc-line); background: var(--fc-panel); color: var(--fc-ink) !important; }
.fc-btn--ghost:hover { border-color: var(--fc-a); color: var(--fc-a-ink) !important; }
.fc-btn--block { width: 100%; }
.fc-btn i { transition: transform .25s; }
.fc-btn--primary:hover i { transform: translateX(3px); }

/* ---------- hero ---------- */
.fc-hero { padding: clamp(28px, 4vw, 52px) 0 clamp(32px, 4vw, 56px); border-bottom: 1px solid var(--fc-line); background: radial-gradient(60% 110% at 100% 0%, rgba(37, 99, 235, .12), transparent 62%), radial-gradient(50% 90% at 0% 0%, rgba(8, 145, 178, .1), transparent 60%), var(--fc-surface); }
.fc-hero__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(24px, 5vw, 72px); align-items: center; }
.fc-crumb .breadcrumb { margin: 0 0 16px; padding: 0; background: none; font-size: .82rem; }
.fc-crumb .breadcrumb a { color: var(--fc-a-ink); }
.fc-crumb .breadcrumb-item.active, .fc-crumb .breadcrumb-item + .breadcrumb-item::before { color: var(--fc-muted); }
.fc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.fc-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--fc-line); border-radius: 999px; background: var(--fc-panel); font-size: .78rem; font-weight: 700; color: var(--fc-ink); }
.fc-chip i { color: var(--fc-a); }
.fc-chip--on { border-color: transparent; background: var(--fc-soft); color: var(--fc-a-ink); }
.fc-title { margin: 0 0 14px; max-width: 20ch; font-size: clamp(2rem, 3.6vw, 3.1rem); font-weight: 800; line-height: 1.07; letter-spacing: -.035em; color: var(--fc-ink); text-wrap: balance; }
.fc-title em { font-style: normal; background: var(--fc-grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em; }
.fc-lead { max-width: 54ch; margin: 0 0 20px; font-size: clamp(1rem, 1.2vw, 1.0625rem); line-height: 1.65; }
.fc-rating { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; font-size: .88rem; }
.fc-rating b { font-size: 1rem; color: var(--fc-ink); }
.fc-stars { color: #f5a524; letter-spacing: 2px; }
.fc-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }

/* the course preview: the course's own icon on a poster, the play button says what it is on hover */
.fc-poster { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; width: 100%; min-height: 300px; padding: 26px; overflow: hidden; border: 0; border-radius: 20px; background: radial-gradient(90% 80% at 100% 0%, rgba(37, 99, 235, .55), transparent 60%), linear-gradient(150deg, #0f1b2d 0%, #123a63 100%); box-shadow: var(--fc-sh2); color: #fff; text-align: left; cursor: pointer; }
.fc-poster::before { content: ""; position: absolute; inset: 0; opacity: .08; background-image: linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px); background-size: 32px 32px; mask-image: linear-gradient(135deg, #000, transparent 70%); }
.fc-poster__top { position: relative; display: flex; align-items: center; gap: 16px; }
.fc-poster__icon { display: grid; place-items: center; flex: none; width: 92px; height: 92px; padding: 14px; border-radius: 22px; background: #fff; box-shadow: 0 18px 34px -14px rgba(0, 0, 0, .6); }
.fc-poster__icon img { width: 100%; height: 100%; object-fit: contain; }
.fc-poster__tag { padding: 5px 12px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.fc-poster__name { position: relative; margin: 0; font-size: clamp(1.15rem, 1.8vw, 1.45rem); font-weight: 800; line-height: 1.2; letter-spacing: -.02em; }
.fc-poster__bottom { position: relative; display: flex; align-items: flex-end; justify-content: flex-end; gap: 16px; }
.fc-play { display: inline-flex; align-items: center; height: 60px; padding: 0 6px; border-radius: 999px; background: #fff; color: #0b4f8a; box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .6); transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s; }
.fc-play i { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--fc-grad); color: #fff; font-size: 1.7rem; }
.fc-play span { max-width: 0; overflow: hidden; font-size: .88rem; font-weight: 800; white-space: nowrap; opacity: 0; transition: max-width .35s cubic-bezier(.2, .7, .2, 1), opacity .25s, padding .35s; }
.fc-poster:hover .fc-play, .fc-poster:focus-visible .fc-play { transform: translateY(-2px); }
.fc-poster:hover .fc-play span, .fc-poster:focus-visible .fc-play span { max-width: 120px; padding: 0 14px 0 10px; opacity: 1; }
@media (hover: none) { .fc-play span { max-width: 120px; padding: 0 14px 0 10px; opacity: 1; } }

/* ---------- section bar ---------- */

/* ---------- body: content and the enrol card ---------- */
.fc-body { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(32px, 4vw, 64px); align-items: start; padding-block: 8px 24px; }
.fc-main { min-width: 0; }
.fc-sec { padding-block: clamp(32px, 4vw, 52px); border-top: 1px solid var(--fc-line); scroll-margin-top: 130px; }
.fc-sec:first-child { border-top: 0; }
.fc-h { display: flex; align-items: center; gap: 14px; margin: 0 0 22px; font-size: clamp(1.3rem, 2vw, 1.65rem); font-weight: 800; line-height: 1.2; letter-spacing: -.025em; color: var(--fc-ink); }
.fc-h i { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 12px; background: var(--fc-soft); color: var(--fc-a); font-size: 1.15rem; }

/* admin written text */
.fc-rte { font-size: .95rem; line-height: 1.7; }
.fc-rte > :first-child { margin-top: 0; }
.fc-rte > :last-child { margin-bottom: 0; }
.fc-rte p { margin: 0 0 .9em; }
.fc-rte h2, .fc-rte h3, .fc-rte h4 { margin: 1.3em 0 .5em; font-size: 1.1rem; font-weight: 800; color: var(--fc-ink); }
.fc-rte b, .fc-rte strong { color: var(--fc-ink); }
.fc-rte a { color: var(--fc-b); font-weight: 600; }
.fc-rte img { max-width: 100%; height: auto; border-radius: 14px; }
.fc-rte table { display: block; max-width: 100%; overflow-x: auto; }
.fc-rte ol, .fc-rte ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: fc; }
.fc-rte li { list-style: none !important; position: relative; padding: 16px 18px 16px 58px; border: 1px solid var(--fc-line); border-radius: 14px; background: var(--fc-panel); counter-increment: fc; transition: border-color .2s, box-shadow .2s; }
.fc-rte li:hover { border-color: rgba(8, 145, 178, .4); box-shadow: var(--fc-sh); }
.fc-rte li::before { content: counter(fc); position: absolute; left: 16px; top: 16px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--fc-soft); color: var(--fc-a-ink); font-size: .8rem; font-weight: 800; }
.fc-rte ul > li::before { content: "\F26E"; font-family: "bootstrap-icons"; font-size: .85rem; }
.fc-rte li:has(> ol:only-child), .fc-rte li:has(> ul:only-child) { grid-column: 1 / -1; padding: 0; border: 0; background: none; }
.fc-rte li:has(> ol:only-child)::before, .fc-rte li:has(> ul:only-child)::before { display: none; }
.fc-fold.is-folded .fc-rte { position: relative; overflow: hidden; }
.fc-fold.is-folded:not(.is-open) .fc-rte::after { content: ""; position: absolute; inset: auto 0 0 0; height: 72px; background: linear-gradient(transparent, var(--fc-bg)); }
.fc-more-btn { margin-top: 14px; padding: 9px 20px; border: 1px solid var(--fc-line); border-radius: 999px; background: var(--fc-panel); font: inherit; font-size: .85rem; font-weight: 700; color: var(--fc-ink); cursor: pointer; transition: border-color .2s, color .2s; }
.fc-more-btn:hover { border-color: var(--fc-a); color: var(--fc-a-ink); }
.fc-note { padding: 20px 22px; border-radius: 16px; background: var(--fc-surface); border: 1px solid var(--fc-line); }

/* course content */
.fc-inc .content-nav-tabs { display: flex; gap: 8px; margin: 0 0 16px; padding: 0; overflow-x: auto; list-style: none; scrollbar-width: none; }
.fc-inc .content-nav-tabs::-webkit-scrollbar { display: none; }
.fc-inc .content-nav-item { flex: 0 0 auto; }
.fc-inc .content-nav-link { display: flex; align-items: center; justify-content: flex-start !important; gap: 10px; width: auto !important; padding: 9px 18px 9px 10px; border: 1px solid var(--fc-line); border-radius: 999px; background: var(--fc-panel); color: var(--fc-ink); white-space: nowrap; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s; }
.fc-inc .content-nav-link:hover { border-color: var(--fc-a); }
.fc-inc .content-nav-link.active { border-color: transparent; background: var(--fc-grad); color: #fff; }
.fc-inc .content-icon-container { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--fc-soft); color: var(--fc-a); }
.fc-inc .content-nav-link.active .content-icon-container { background: rgba(255, 255, 255, .22); color: #fff; }
.fc-inc .content-tab-label { font-size: .88rem; font-weight: 700; }
.fc-inc .content-tab-meta { font-size: .72rem; opacity: .8; }
.fc-inc .content-tab-pane { display: none; }
.fc-inc .content-tab-pane.active { display: block; }
.fc-inc .content-items-list { display: grid; gap: 8px; }
.fc-inc .content-item-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; padding: 14px 18px; border: 1px solid var(--fc-line); border-radius: 14px; background: var(--fc-panel); }
.fc-inc .content-item-title { display: flex; align-items: center; gap: 10px; margin: 0; font-size: .92rem; font-weight: 600; color: var(--fc-ink); }
.fc-inc .content-item-title svg { flex: none; color: var(--fc-a); }
.fc-inc .content-item-desc { display: flex; align-items: center; gap: 10px; font-size: .8rem; font-weight: 600; color: var(--fc-muted); white-space: nowrap; }
.fc-inc .content-action-btn { padding: 3px 14px; border: 1px solid var(--fc-a); border-radius: 999px; background: transparent; color: var(--fc-a-ink); font-weight: 700; }
.fc-inc .accordion-item { margin-bottom: 10px; overflow: hidden; border: 1px solid var(--fc-line); border-radius: 16px !important; background: var(--fc-panel); }
.fc-inc .accordion-button { gap: 10px; padding: 18px 20px; background: var(--fc-panel); color: var(--fc-ink); font-size: .95rem; font-weight: 700; box-shadow: none; }
.fc-inc .accordion-button:not(.collapsed) { background: var(--fc-soft); color: var(--fc-a-ink); }
.fc-inc .accordion-button > span + span { flex: none !important; white-space: nowrap; }
.fc-inc .accordion-body { padding: 12px; background: var(--fc-surface); }

/* certificate */
.fc-cert { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 3vw, 32px); align-items: stretch; }
.fc-cert__text { margin-top: 28px; }
.fc-cert__frame { padding: 10px; border: 1px solid var(--fc-line); border-radius: 18px; background: var(--fc-panel); box-shadow: var(--fc-sh); }
.fc-cert__img { display: block; width: 100%; height: auto; aspect-ratio: 65 / 46; border-radius: 10px; }
.fc-cert__cap { margin-top: 12px; font-size: .8rem; color: var(--fc-muted); }
.fc-cert__cap a { color: var(--fc-b); font-weight: 700; }
.fc-steps { display: grid; grid-template-rows: repeat(3, 1fr); gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: st; }
.fc-steps li { display: flex; align-items: center; gap: 14px; padding: 14px 20px; border: 1px solid var(--fc-line); border-radius: 16px; background: var(--fc-panel); box-shadow: var(--fc-sh); font-size: .92rem; font-weight: 700; color: var(--fc-ink); counter-increment: st; }
.fc-steps li::before { content: counter(st); display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--fc-grad); color: #fff; font-size: .82rem; }

/* enrol card */
.fc-side { position: sticky; top: 130px; padding-top: 28px; }
.fc-buy { overflow: hidden; border: 1px solid var(--fc-line); border-radius: 20px; background: var(--fc-panel); box-shadow: var(--fc-sh2); }
.fc-buy__top { display: flex; align-items: center; gap: 14px; padding: 20px 22px; border-bottom: 1px solid var(--fc-line); background: var(--fc-surface); }
.fc-buy__icon { display: grid; place-items: center; flex: none; width: 56px; height: 56px; padding: 8px; border: 1px solid var(--fc-line); border-radius: 16px; background: #fff; }
.fc-buy__icon img { width: 100%; height: 100%; object-fit: contain; }
.fc-buy__price { display: flex; align-items: baseline; gap: 10px; }
.fc-buy__price b { font-size: 2rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--fc-ink); }
.fc-buy__price del { font-size: .92rem; color: var(--fc-muted); }
.fc-buy__tag { display: block; margin-top: 4px; font-size: .78rem; font-weight: 700; color: var(--fc-ok); }
.fc-buy__body { padding: 20px 22px 22px; }
.fc-buy__list { display: grid; gap: 12px; margin: 0 0 20px; padding: 0; list-style: none; }
.fc-buy__list li { display: flex; align-items: center; gap: 12px; font-size: .9rem; font-weight: 600; color: var(--fc-ink); }
.fc-buy__list li i:first-child { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: var(--fc-soft); color: var(--fc-a); }
.fc-buy__list li i:last-child { margin-left: auto; color: var(--fc-ok); }
.fc-buy__note { margin: 14px 0 0; font-size: .78rem; text-align: center; color: var(--fc-muted); }

/* more courses */
.fc-more { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.fc-mc { display: flex; flex-direction: column; gap: 12px; padding: 20px; border: 1px solid var(--fc-line); border-radius: 18px; background: var(--fc-panel); transition: transform .25s, box-shadow .25s, border-color .25s; }
.fc-mc:hover { transform: translateY(-3px); border-color: rgba(8, 145, 178, .4); box-shadow: var(--fc-sh2); }
.fc-mc__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fc-mc__top img { width: 52px; height: 52px; padding: 7px; object-fit: contain; border: 1px solid var(--fc-line); border-radius: 14px; background: #fff; }
.fc-mc__lvl { padding: 4px 12px; border-radius: 999px; background: var(--fc-soft); font-size: .72rem; font-weight: 800; color: var(--fc-a-ink); }
.fc-mc h3 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; font-size: 1rem; font-weight: 800; line-height: 1.35; color: var(--fc-ink); }
.fc-mc__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .8rem; color: var(--fc-muted); }
.fc-mc__go { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; font-weight: 800; color: var(--fc-a-ink); }
.fc-mc__go i { transition: transform .25s; }
.fc-mc:hover .fc-mc__go i { transform: translateX(4px); }
.fc-band { padding-block: clamp(32px, 4vw, 56px); border-top: 1px solid var(--fc-line); background: var(--fc-surface); }

/* the course content band, right under the hero */
.fc-cur { position: relative; padding: clamp(40px, 5vw, 72px) 0; border-bottom: 1px solid var(--fc-line); background: radial-gradient(70% 100% at 0% 0%, rgba(8, 145, 178, .1), transparent 60%), radial-gradient(60% 100% at 100% 100%, rgba(37, 99, 235, .1), transparent 60%), var(--fc-surface); scroll-margin-top: 120px; }
.fc-cur__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 40px; margin-bottom: 28px; }
.fc-cur__title { margin: 0 0 8px; font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 800; line-height: 1.1; letter-spacing: -.03em; color: var(--fc-ink); text-wrap: balance; }
.fc-cur__lead { max-width: 46ch; margin: 0; font-size: 1rem; line-height: 1.6; }
.fc-cur__stats { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; }
.fc-cur__stats li { display: flex; align-items: center; gap: 12px; min-width: 138px; padding: 14px 20px 14px 14px; border: 1px solid var(--fc-line); border-radius: 16px; background: var(--fc-panel); box-shadow: var(--fc-sh); }
.fc-cur__stats i { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--fc-grad); color: #fff; font-size: 1.15rem; }
.fc-cur__stats b { display: block; font-size: 1.55rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--fc-ink); }
.fc-cur__stats small { font-size: .75rem; color: var(--fc-muted); }
.fc-cur__panel { padding: clamp(14px, 2.4vw, 26px); border: 1px solid var(--fc-line); border-radius: 24px; background: var(--fc-panel); box-shadow: var(--fc-sh2); }

/* life on scroll: sections fade up, rows follow in turn, the course icon floats (all off for reduced motion) */
.fc-js .fc-rv { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .8s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--d, 0) * 80ms); }
.fc-js .fc-rv.in { opacity: 1; transform: none; }
.fc-js .fc-rv.done { transition-delay: 0s; }
.fc-js .fc-sec:not(.in) .fc-rte li { opacity: 0; transform: translateY(14px); }
.fc-js .fc-sec.in .fc-rte li { transition: opacity .55s ease, transform .6s cubic-bezier(.2, .7, .2, 1), border-color .2s, box-shadow .2s; transition-delay: calc(var(--i, 0) * 55ms); }
.fc-js .fc-sec.done .fc-rte li { transition-delay: 0s; }
.fc-h i { transition: transform .6s cubic-bezier(.3, 1.6, .5, 1) .15s; }
.fc-js .fc-sec:not(.in) .fc-h i { transform: scale(.6) rotate(-14deg); }
.fc-hero__grid > * { animation: fc-in .8s cubic-bezier(.2, .7, .2, 1) both; }
.fc-hero__grid > :nth-child(2) { animation-delay: .12s; }
@keyframes fc-in { from { opacity: 0; transform: translateY(18px); } }
.fc-poster { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .3s; }
.fc-poster__icon { animation: fc-float 6s ease-in-out infinite; }
@keyframes fc-float { 50% { transform: translateY(-6px); } }

.fc-bar { display: none; }

@media (max-width: 1099.98px) {
    .fc-body { grid-template-columns: minmax(0, 1fr); }
    .fc-side { display: none; }
    .fc-bar { position: fixed; inset: auto 0 0 0; z-index: 1030; display: flex; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--fc-line); background: var(--fc-panel); box-shadow: 0 -10px 28px rgba(15, 60, 100, .14); }
    body:has(.fc-bar) { padding-bottom: 76px; }
}
@media (max-width: 991.98px) {
    .fc-hero__grid { grid-template-columns: minmax(0, 1fr); }
    .fc-poster { min-height: 0; }
}
@media (max-width: 767.98px) {
    .fc-cur__stats { width: 100%; }
    .fc-cur__stats li { flex: 1 1 calc(50% - 12px); min-width: 0; }
    .fc-cert { grid-template-columns: minmax(0, 1fr); }
    .fc-cert__fig { order: -1; margin: 0; }
    .fc-more { display: flex; gap: 12px; margin-inline: -20px; padding: 4px 20px 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
    .fc-more::-webkit-scrollbar { display: none; }
    .fc-mc { flex: 0 0 78%; scroll-snap-align: start; }
}
@media (max-width: 575.98px) {
    .fc-actions { flex-wrap: nowrap; gap: 8px; }
    .fc-actions .fc-btn { flex: 1 1 0; min-width: 0; height: 48px; padding: 0 14px; font-size: .88rem; }
    .fc-poster { padding: 20px; gap: 20px; }
    .fc-poster__icon { width: 72px; height: 72px; padding: 11px; border-radius: 18px; }
    .fc-rte ol, .fc-rte ul { grid-template-columns: minmax(0, 1fr); }
    .fc-rte li { padding: 14px 14px 14px 52px; }
    .fc-rte li::before { left: 14px; top: 14px; }
    .fc-inc .accordion-button { padding: 14px 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .fc *, .fc *::before, .fc *::after { transition: none !important; animation: none !important; }
    html:has(.fc) { scroll-behavior: auto; }
}

/* the job-oriented version of this course, in the hero (a calm card, the gradient only on the button) */
.fc-deep { display: flex; align-items: center; gap: 18px; margin-top: clamp(22px, 3vw, 34px); padding: 16px 18px 16px 16px; border: 1px solid var(--fc-line); border-radius: 20px; background: linear-gradient(120deg, rgba(8, 145, 178, .07), rgba(37, 99, 235, .05)), var(--fc-panel); color: inherit; text-decoration: none; box-shadow: var(--fc-sh); transition: transform .25s, border-color .25s, box-shadow .25s; }
.fc-deep:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--fc-a) 45%, var(--fc-line)); box-shadow: var(--fc-sh2); color: inherit; }
.fc-deep__img { display: grid; place-items: center; flex: none; width: 62px; height: 62px; padding: 10px; border: 1px solid var(--fc-line); border-radius: 18px; background: #fff; transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.fc-deep:hover .fc-deep__img { transform: rotate(-4deg) scale(1.04); }
.fc-deep__img img { width: 100%; height: 100%; object-fit: contain; }
.fc-deep__copy { display: grid; gap: 3px; min-width: 0; flex: 1 1 auto; }
.fc-deep__copy small { font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--fc-a-ink); }
.fc-deep__copy > b { font-size: 1.1rem; font-weight: 800; letter-spacing: -.015em; line-height: 1.25; color: var(--fc-ink); }
.fc-deep__stats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.fc-deep__stats > span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 10px; background: var(--fc-soft); font-size: .78rem; font-weight: 600; color: var(--fc-body); white-space: nowrap; }
.fc-deep__stats i { font-size: .85rem; color: var(--fc-a); }
.fc-deep__stats b { font-size: .85rem; font-weight: 800; color: var(--fc-ink); }
.fc-deep__go { flex: none; display: inline-flex; align-items: center; gap: 12px; height: 52px; padding: 0 24px 0 6px; border-radius: 999px; background: var(--fc-grad); color: #fff; font-size: .95rem; font-weight: 700; white-space: nowrap; box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 14px 26px -14px rgba(8, 145, 178, .8); }
.fc-deep__ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .22); font-size: 1.05rem; transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.fc-deep:hover .fc-deep__ic { transform: rotate(45deg); }
.fc-deep__line { margin-top: 2px; font-size: .88rem; line-height: 1.5; color: var(--fc-body); }
@media (max-width: 767.98px) {
    .fc-deep { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 14px; padding: 14px; }
    .fc-deep__img { width: 52px; height: 52px; padding: 8px; border-radius: 15px; }
    .fc-deep__copy > b { font-size: 1rem; }
    .fc-deep__go { grid-column: 1 / -1; justify-content: center; padding-right: 22px; }
}
@media (prefers-reduced-motion: reduce) { .fc-deep, .fc-deep__img { transition: none; } }