/* Generated by tools/bootcamps/build.mjs from css/lunartech-course.css, then tools/bootcamps/section-bar.css. Edit those. */
.lt-bc-bar { --lc-nav: 96px; --lc-ease: cubic-bezier(0.16, 1, 0.3, 1); }
.lc-wrap { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; }
@media (max-width: 767px) {
.lc-wrap { padding: 0 16px; }
}
.lc-glass {
  --lc-rim:
    radial-gradient(280px 210px at 0 0, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0) 100%),
    radial-gradient(240px 180px at 100% 100%, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0) 100%),
    linear-gradient(rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.06));
  position: relative;
  isolation: isolate;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .022 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 160px 160px,
    linear-gradient(160deg, rgba(255, 255, 255, 0.014) 0%, rgba(255, 255, 255, 0) 36%, rgba(255, 255, 255, 0) 72%, rgba(255, 255, 255, 0.006) 100%),
    rgba(0, 0, 0, 0.58);
  -webkit-backdrop-filter: blur(26px) saturate(115%) brightness(0.42);
  backdrop-filter: blur(26px) saturate(115%) brightness(0.42);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5),
    inset 0 -26px 44px -30px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(0, 0, 0, 0.42),
    0 32px 70px -30px rgba(0, 0, 0, 0.92),
    0 6px 18px -6px rgba(0, 0, 0, 0.5);
}
.lc-glass::before { /* rim light */
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 2;
  background: var(--lc-rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.lc-glass::after { /* pointer glow */
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1; opacity: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0) 60%);
  transition: opacity 0.5s ease;
}
.lc-glass.is-lit::after { opacity: 1; }
.lc-glass > * { position: relative; z-index: 3; }
.lt-bc-bar .lc-shimmer-btn { --spread: 90deg; --shimmer-color: rgba(255, 255, 255, 0.6); --radius: 9999px; --speed: 4s; --cut: 1px; --bg: rgba(255, 255, 255, 0.05); position: relative; isolation: isolate; overflow: hidden; display: inline-flex; border-radius: var(--radius); cursor: pointer; border: none; background: none; padding: 0; transition: all .3s; box-shadow: 0 8px 40px rgba(100, 100, 100, .15); }
.lt-bc-bar .lc-shimmer-btn:hover { transform: scale(1.05); box-shadow: 0 0 40px 8px rgba(100, 100, 100, .25); }
.lt-bc-bar .lc-shimmer-btn::before { content: ""; position: absolute; inset: 0; z-index: 0; }
.lt-bc-bar .lc-shimmer-btn::after { content: ""; position: absolute; inset: calc(-1 * var(--cut)); border-radius: var(--radius); background: var(--bg); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 1; }
.lt-bc-bar .lc-shimmer-gradient { position: absolute; inset: -200%; width: 400%; height: 400%; animation: none; z-index: 0; }
.lt-bc-bar .lc-shimmer-btn:hover .lc-shimmer-gradient { animation: lt-rotate-gradient var(--speed) linear infinite; }
.lt-bc-bar .lc-shimmer-gradient > span { position: absolute; inset: 0; background: conic-gradient(from calc(270deg - (var(--spread) * 0.5)), transparent 0, var(--shimmer-color) var(--spread), transparent var(--spread)); }
.lt-bc-bar .lc-shimmer-content { position: relative; z-index: 10; border-radius: var(--radius); display: flex; align-items: center; gap: 8px; height: var(--lc-btn-h, 46px); padding: 0 22px; box-sizing: border-box; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 400; line-height: 1; color: #fff; }
.lt-bc-bar .lc-shimmer-label, .lt-bc-bar .lc-shimmer-content svg { position: relative; z-index: 10; white-space: nowrap; flex: none; }
.lt-bc-bar .lc-shimmer-border-beam { position: absolute; display: block; width: 200%; height: 200%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .2), rgba(255, 255, 255, .2), rgba(255, 255, 255, .2), rgba(255, 255, 255, .2), transparent); animation: none; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; opacity: 0; transition: opacity .3s ease; }
.lt-bc-bar .lc-shimmer-btn:hover .lc-shimmer-border-beam { animation: lt-border-beam-rotation 4s infinite linear; opacity: 1; }
.lt-bc-bar .lc-shimmer-bg { position: absolute; inset: 1px; background: rgba(101, 85, 70, 0.3); border-radius: var(--radius); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 1; transition: background .3s ease; }
.lt-bc-bar .lc-shimmer-btn:hover .lc-shimmer-bg { background: rgba(100, 140, 110, 0.4); }
.lt-bc-bar .lc-shimmer-beam-container { position: absolute; inset: 0; border-radius: var(--radius); overflow: hidden; padding: 0.5px; z-index: 0; opacity: 1; pointer-events: none; transition: padding .5s cubic-bezier(.4, 0, .2, 1); }
.lt-bc-bar .lc-shimmer-btn:hover .lc-shimmer-beam-container { padding: 0.75px; }
.lt-bc-bar .lc-shimmer-beam-container::before { content: ""; position: absolute; inset: -100%; background: conic-gradient(from 0deg, transparent 0deg 352deg, rgba(255, 255, 255, .4) 356deg, rgba(255, 255, 255, .65) 358deg, rgba(255, 255, 255, .4) 360deg); animation: lt-beam-spin 6s linear infinite; filter: blur(.5px); }
.lt-bc-bar .lc-shimmer-btn:hover .lc-shimmer-beam-container::before { background: conic-gradient(from 0deg, transparent 0deg 345deg, rgba(120, 180, 140, .5) 352deg, rgba(100, 160, 120, .7) 356deg, rgba(120, 180, 140, .5) 360deg); filter: blur(.3px); }
.lt-bc-bar .lc-shimmer-beam-container::after { content: ""; position: absolute; inset: .5px; border-radius: var(--radius); background: transparent; z-index: 1; transition: inset .5s cubic-bezier(.4, 0, .2, 1); }
.lt-bc-bar .lc-shimmer-btn:hover .lc-shimmer-beam-container::after { inset: .75px; }
.lc-tabs-wrap { position: sticky; top: var(--lc-nav); z-index: 60; margin-top: -28px; padding: 0 24px; pointer-events: none; }
.lc-tabs-wrap > .lc-wrap { padding: 0; }
@media (max-width: 639px) {
.lc-tabs-wrap { padding: 0 16px; }
}
.lc-tabs { --lc-tab-pad: 18px; position: relative; pointer-events: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; padding: 6px; border-radius: 9999px; background: rgba(5, 5, 5, 0.84); -webkit-backdrop-filter: blur(32px) saturate(115%) brightness(0.7); backdrop-filter: blur(32px) saturate(115%) brightness(0.7); box-shadow: 0 12px 30px -16px rgba(0, 0, 0, 0.9); }
.lc-tabs::before { background: rgba(255, 255, 255, 0.085); }
.lc-tabs::after { display: none; }
.lc-tabs-title { grid-column: 1; justify-self: start; max-width: 100%; box-sizing: border-box; padding-left: 21px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; font-weight: 400; color: rgba(255, 255, 255, 0.85); opacity: 0; }
.lc-tabs.has-cta .lc-tabs-title { opacity: 1; }
.lc-tabs-scroll { grid-column: 2; position: relative; display: flex; align-items: center; gap: 2px; min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.lc-tabs-scroll::-webkit-scrollbar { display: none; }
.lc-tab { position: relative; z-index: 1; flex: none; height: 40px; padding: 0 var(--lc-tab-pad); display: inline-flex; align-items: center; font-size: 13px; font-weight: 400; color: rgba(255, 255, 255, 0.5); transition: color 0.3s; }
.lc-tab:hover { color: rgba(255, 255, 255, 0.85); }
.lc-tab.is-active { color: #fff; }
.lc-tabs-ink { position: absolute; left: 0; bottom: 5px; height: 1px; width: 0; z-index: 0; pointer-events: none; opacity: 0; transition: transform 0.6s var(--lc-ease), width 0.6s var(--lc-ease), opacity 0.4s; }
.lc-tabs-ink::after { content: ''; position: absolute; top: 0; bottom: 0; left: var(--lc-tab-pad); right: var(--lc-tab-pad); background: rgba(255, 255, 255, 0.85); }
.lt-bc-bar .lc-tabs-cta { --lc-btn-h: 40px; grid-column: 3; justify-self: end; opacity: 0; pointer-events: none; transition: transform 0.3s, box-shadow 0.3s; }
.lc-tabs:not(.is-ready) .lc-tabs-ink, .lc-tabs:not(.is-ready) .lc-tabs-cta { transition: none !important; }
.lt-bc-bar .lc-tabs.has-cta .lc-tabs-cta { opacity: 1; transform: none; pointer-events: auto; }
.lt-bc-bar .lc-tabs.has-cta .lc-tabs-cta:hover { transform: scale(1.05); }
.lt-bc-bar .lc-tabs-cta .lc-shimmer-beam-container::before { background: rgba(255, 255, 255, 0.11); animation: none; filter: none; }
.lt-bc-bar .lc-tabs-cta:hover .lc-shimmer-beam-container::before { animation: lt-beam-spin 6s linear infinite; }
.lt-bc-bar .lc-tabs-cta .lc-shimmer-content { width: 100%; justify-content: space-between; padding: 0 20px; }
@media (max-width: 1199px) {
.lc-tabs-title { display: none; }
}
@media (max-width: 1099px) {
.lc-tabs { grid-template-columns: minmax(0, 1fr) auto; }
.lc-tabs-scroll { grid-column: 1; justify-self: start; padding-left: 3px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 22px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 22px), transparent 100%); }
.lt-bc-bar .lc-tabs-cta { grid-column: 2; margin-left: 6px; }
}
@media (max-width: 767px) {
.lc-tabs { --lc-tab-pad: 14px; }
.lc-tabs-scroll { padding-left: 7px; }
.lc-tabs-wrap { top: 84px; margin-top: -24px; }
.lc-tab { height: 38px; }
.lt-bc-bar .lc-tabs-cta { display: none; }
}

/* What differs from the course pages' bar on the bootcamp pages. build.mjs adds this after the rules it lifts from css/lunartech-course.css. */

/* The frame round this bar's button. Course pages dropped theirs when the instructor icon left their bar, so these rules live here now. */
.lc-tabs-end { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 8px; min-width: 0; }
@media (min-width: 1100px) and (max-width: 1139px) { .lc-tabs:has(.lc-tabs-end) { --lc-tab-pad: 15px; } }
@media (max-width: 1099px) { .lc-tabs-end { grid-column: 2; margin-left: 6px; } .lt-bc-bar .lc-tabs-end .lc-tabs-cta { margin-left: 0; } }

/* Main's wrapper has overflow: hidden, which stops anything inside it sticking. clip paints the same and doesn't. Older browsers ignore it, and the bar scrolls away with the page. */
body .page-wrapper { overflow: clip; }
/* flow-root keeps the wrapper's margins where they were, so nothing on the page moves. */
.lt-bc-body { display: flow-root; }

/* Inside the foot of the banner, as on a course page, so it shows on the first screen. The height cancels the margin, so nothing below it moves. */
.lt-bc-bar.lc-tabs-wrap { height: 56px; margin-top: -56px; }
.lt-bc-bar a { text-decoration: none; }
.lt-bc-sec { scroll-margin-top: 150px; }

/* The course bar's type. black.css sets every font on these pages through --t-font. */
.lt-bc-bar .lc-tab,
.lt-bc-bar .lc-tabs-title { --t-font: Geist, Inter; line-height: 1.7; }
/* "Register Interest" is 2px too long for the usual 8px gap, which pushed its arrow out from under the header's. */
.lt-bc-bar .lc-tabs-cta .lc-shimmer-content { gap: 4px; }

/* Main gives its application form z-index 0, so the bar would sit on top of it. The header stays above both, as it always has. */
body [class*="modal-wrapper"] { z-index: 100; }

/* The banner's buttons sit lower on a phone, so it starts lower too, as on a course page. It takes its real height, 26px of it below the banner, so it leaves before the footer.
   A negative bottom margin would cancel those 26px, but it also lets a sticky bar hang that far over the footer. */
@media (max-width: 767px) {
  .lt-bc-bar.lc-tabs-wrap { height: 50px; margin-top: -24px; }
}