/* The bootcamp pages in black: main's layout and markup, in the site's colours and type.
   Copied to origin/css/lunartech-bootcamp-black.css by build.mjs and loaded last.
   Main's rules are one or two classes deep, so "body" in front is enough to outrank them, including the styles embedded in the page. */

/* ---------- Colours ---------- */

html { background: #000; }

body {
  /* Main's stylesheet draws almost everything from these five, so swapping them turns text and cards at once, in every state and at every width. */
  --marble: #f5f5f5;
  --black: #f5f5f5;
  --white: #0b0b0c;
  --smoke: #161618;
  --grey: #8a8a8a;
  background-color: #000;
  color: #f5f5f5;
  font-family: Inter, sans-serif;
  font-weight: 300;
}

/* ---------- Type: the home page's scale, measured from it, so the same role looks the same on both ---------- */

/* Main sets its sizes at every width and up to four classes deep, so sizes and weights here are !important rather than a race.
   The comments name the home page rule each size was read from. */
body {
  --t-hero: 5.5rem;         /* .ltx-heading-1, 88px */
  --t-hero-lh: 1.1;
  --t-title: 3.33vw;        /* .lt-trend-title, .lt-voices-title, 48px at 1440 */
  --t-sub: 2.2vw;           /* .lt-paths-title, 32px at 1440 */
  --t-number: 4vw;          /* the home metrics, 58px at 1440 */
  --t-muted: rgba(255, 255, 255, 0.42);   /* .lt-prog-name span */
}
@media (max-width: 991px) { body { --t-hero: 3.8rem; --t-hero-lh: 1.15; --t-title: 5vw; --t-sub: 4.4vw; --t-number: 7vw; } }
@media (max-width: 767px) { body { --t-hero: 3rem; } }
@media (max-width: 479px) { body { --t-hero: 2.9rem; --t-title: 8vw; --t-sub: 6.6vw; --t-number: 10.67vw; } }

/* Inter unless a role asks for Geist. The variable inherits, so spans inside follow their parent. */
:is(.page-wrapper, [class*="modal-wrapper"]) :not(.lt-site-footer, .lt-site-footer *, [class*="lt-carousel-icon-"]) { font-family: var(--t-font, Inter), sans-serif !important; }

/* Hero title */
body [class*="heading-1-"] { --t-font: Geist; font-size: var(--t-hero) !important; line-height: var(--t-hero-lh) !important; font-weight: 400 !important; letter-spacing: normal; color: #fff; }

/* Section titles */
body .heading-2,
body .heading-3.large,
body .heading-3.last-section,
body .heading-7,
body .ltm-heading { font-size: var(--t-title) !important; line-height: 1.1 !important; font-weight: 300 !important; letter-spacing: -0.01em; color: #f5f5f5; }

/* Smaller titles: most of main's headings are whole sentences */
body .heading-3,
body .vr-heading,
body .intro-text { font-size: var(--t-sub) !important; line-height: 1.14 !important; font-weight: 300 !important; letter-spacing: -0.01em; }
body .intro-text { line-height: 1.35 !important; }
body .heading-3.large,
body .heading-3.last-section { font-size: var(--t-title) !important; line-height: 1.1 !important; }

/* The words main greys out inside a title */
body .text-span,
body .text-span-4,
body .text-span-5,
body .text-span-28,
body .text-span-29,
body .text-span-38,
body .text-span-39,
body .text-span-40,
body .text-span-41,
body .ltm-heading span,
body .vr-heading .vr-text-light { color: var(--t-muted); }

/* Big numbers */
body .big-numbers { font-size: var(--t-number) !important; line-height: 1.1 !important; font-weight: 300 !important; letter-spacing: -0.03em; color: #f5f5f5; }

/* Long reading text: .lt-prog-blurb */
body p.heading-5 { font-size: 16px !important; line-height: 1.65 !important; font-weight: 300 !important; letter-spacing: normal; color: rgba(255, 255, 255, 0.74); max-width: 62ch; }
/* Words over a picture or in a feature card */
body p.heading-6,
body [class*="heading-6-reviews-forbes"] { font-size: 16px !important; line-height: 1.6 !important; font-weight: 300 !important; letter-spacing: normal; }
body [class*="heading-6-reviews-forbes"].small-forbes { color: var(--t-muted); }

/* Section labels: .lt-path-head */
body div.heading-6,
body .module-title { --t-font: Geist; font-size: 12px !important; line-height: 1.3 !important; font-weight: 400 !important; letter-spacing: 0.16em; text-transform: uppercase; color: #8a8a8a; }
body .small-elipse { width: 4px; height: 4px; background-color: #8a8a8a; }

/* Curriculum lists: .lt-step-title */
body .services-block { row-gap: 0.85rem; }
body .services-block .heading-5 { --t-font: Geist; font-size: 15px !important; line-height: 1.35 !important; font-weight: 300 !important; letter-spacing: normal; color: #cfcfcf; }
/* Plan names in the pricing cards: .plan */
body div.heading-5.text-weight-light.text-color-grey { font-size: 12.8px !important; line-height: 1.6 !important; font-weight: 400 !important; letter-spacing: 0.063em; text-transform: uppercase; color: #8a8a8a; }

/* Item titles: .lt-role-name */
body .heading-4,
body .text-size-xlarge { font-size: 17px !important; line-height: 1.3 !important; font-weight: 300 !important; letter-spacing: normal; color: #f5f5f5; }
body .card-heading-2 { font-size: 18px !important; line-height: 1.25 !important; font-weight: 300 !important; }

/* Short paragraphs: .lt-prog-lede */
body .text-size-medium { --t-font: Geist; font-size: 15px !important; line-height: 1.6 !important; font-weight: 300 !important; margin-bottom: 2rem; color: #9a9a9a; }
/* Text in cards: .lt-paths-lede */
body .text-size-medium.text-color-grey { font-size: 14px !important; color: #8a8a8a; margin-bottom: 0; }
/* Stat captions and small print: .lt-metric-desc */
body .text-color-grey:not(.text-size-medium, .heading-5, .heading-6),
body [class*="text-weight-regular"].text-color-grey { font-size: 13.5px !important; line-height: 1.65 !important; font-weight: 300 !important; letter-spacing: 0.01em; color: #8b8b8b; }
body .text-size-large { --t-font: Geist; font-size: 15px !important; font-weight: 300 !important; line-height: 1.35 !important; }
body .text-color-80-opacity { --t-font: Geist; font-size: 13px !important; line-height: 1.5 !important; color: rgba(255, 255, 255, 0.66); }
body .caps.text-weight-medium { --t-font: Geist; font-size: 11px !important; line-height: 1.3 !important; font-weight: 400 !important; letter-spacing: 0.08em; }
body .label-number .text-weight-medium,
body .label-number { --t-font: Geist; font-size: 11px !important; font-weight: 400 !important; letter-spacing: 0.08em; }
body .fs-sliderdots_content { --t-font: Geist; font-size: 13px !important; font-weight: 300 !important; }

body .row-wrapper,
body .container-2 { color: #f5f5f5; }
body .font-dark-gray { color: #9a9a9a; font-weight: 300; }
body .fc-secondary { color: var(--t-muted); }

/* ---------- Surfaces: near-black with a hairline edge in place of main's white cards and soft shadows ---------- */

body .benefits-card,
body .about-card-revolution,
body .features-integrations-marquee,
body .left-card,
body .right-card,
body .vr-card,
body .fs-sliderdots_slide,
body .ltm-card {
  background-color: #0b0b0c;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}
body .vr-card { border-color: transparent; }
body .vr-card:hover { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16); }
body .ltm-card { box-shadow: none; }
body .ltm-card:hover { border-color: rgba(255, 255, 255, 0.18); }
body .fs-sliderdots_slide { color: #f5f5f5; }
body .popup-content-wrapper:not(.video) { background-color: #0b0b0c; }

body .divider-line,
body .modal-divider,
body .tab-line { background-color: rgba(255, 255, 255, 0.12); }
body .vr-bottom-row,
body .ltm-author { border-top-color: rgba(255, 255, 255, 0.1); }

/* The fades at the edges of the logo strips and at the foot of the hero end in the page colour. */
body section[class*="home-hero"],
body section.home-ai-executive { box-shadow: inset 0 -260px 200px -140px #000; }
body .half-bg-bottom { background-color: transparent; }
body .half-bg-bottom.home-v1-hero-gradient-bottom { background-image: linear-gradient(#0000 80%, #000 92%); }
body .half-bg-left.stat-bg-left { background-image: linear-gradient(90deg, #000, #0000 28%); }
body .half-bg-right-left-use-later.stat-right { background-image: linear-gradient(270deg, #000, #0000 28%); }

/* Invisible on main's pale page, a dashed white frame on ours. */
body .testimonial-overlay-1,
body .testimonial-overlay-partnership { outline: 0; }

/* ---------- Logos and icons: pictures, stars and icons keep their colours; marks that are dark in main's files turn white ---------- */

/* Every logo here is a dark mark on a transparent background. Inverting rather than flattening keeps the inner detail of the few that have some. */
body .logo-strip-row img,
body .about-logo-image { filter: invert(1) grayscale(1) brightness(1.25); opacity: 0.82; }
/* Main fades these for its white page, which on black leaves them barely there. */
body .about-logos { opacity: 1; }

/* The marquee's logos keep their colours; only their white tiles are redrawn dark (darkLogo in build.mjs). The panel behind them stays quiet. */
body .integrations-images-about { background-color: rgba(255, 255, 255, 0.015); }

body .benefits-icon { background-color: rgba(255, 255, 255, 0.06); }
body .benefits-icon img { filter: brightness(0) invert(1); opacity: 0.86; }
body .check-icon-wrap { background-color: rgba(255, 255, 255, 0.08); }
body .check-icon svg path { fill: #f5f5f5; }
body [class*="modal-close-icon"] { filter: invert(1); }

/* ---------- Buttons: the site's dark glass pill ---------- */

body .button,
body .button.black,
body .button-black-66,
body .button-black-66.black,
body .button-9 {
  border: 0;
  background-color: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  color: #f5f5f5;
  font-weight: 400;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  transition: background-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
}
body .button:hover,
body .button.black:hover,
body .button-black-66:hover,
body .button-black-66.black:hover,
body .button-9:hover {
  border: 0;
  background-color: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42);
  color: #fff;
}
body .button-secondary,
body .button-secondary.dark {
  border-color: rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.86);
}
body .button-secondary:hover,
body .button-secondary.dark:hover {
  border-color: rgba(255, 255, 255, 0.42);
  background-color: rgba(255, 255, 255, 0.05);
  color: #fff;
}
body .button-fill { background-color: rgba(255, 255, 255, 0.07); }

/* The size of the site's buttons (.lc-btn), in place of main's 72px */
body .button,
body .button.black,
body .button-black-66,
body .button-black-66.black,
body .button-9,
body .button-secondary,
body .button-secondary.dark {
  --t-font: Geist;
  height: 46px;
  padding: 0 22px;
  font-size: 13.5px !important;
  line-height: 1 !important;
  font-weight: 400 !important;
  white-space: nowrap;
  align-items: center;
  column-gap: 0.75rem;
}
/* Main's button words sit in their own elements with their own sizes. */
body .button-secondary *,
body .button *,
body .button-black-66 * { font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; margin: 0; color: inherit; }

body .fs-sliderdots_arrow-left,
body .fs-sliderdots_arrow-right {
  background-color: rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  color: #f5f5f5;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

/* ---------- The apply form ---------- */

body .modal,
body .modal-2,
body .modal-3,
body [class*="modal-4"],
body [class*="modal-ai"] {
  background-color: #0b0b0c;
  border-color: rgba(255, 255, 255, 0.1);
  color: #f5f5f5;
}
body .modal-heading { font-size: 28.8px !important; line-height: 1.16 !important; font-weight: 300 !important; letter-spacing: -0.01em; }
body .modal-checklist-item { --t-font: Geist; font-size: 15px !important; font-weight: 300 !important; line-height: 1.35 !important; color: #cfcfcf; }
body .modal-checklist-icon svg { width: 22px; height: 22px; }
body .label { --t-font: Geist; font-size: 13px !important; color: #9a9a9a; font-weight: 300 !important; }
body .input,
body .lt-input { --t-font: Geist; font-size: 14px !important; font-weight: 300 !important; }
body .input,
body .lt-input {
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  background-color: rgba(255, 255, 255, 0.03);
  color: #f5f5f5;
}
body .button-9 { border-radius: 9999px; letter-spacing: 0; }
body .input:focus,
body .lt-input:focus { border-color: rgba(255, 255, 255, 0.42); }
body .input::placeholder,
body .lt-input::placeholder { color: #7d7d7d; }
body .form-button-row { --t-font: Geist; font-size: 13px !important; font-weight: 300 !important; line-height: 1.4 !important; color: #8a8a8a; }
body .lt-email-form-done,
body .lt-email-form-fail { background-color: #0b0b0c; color: #d4d4d4; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1); }

/* ---------- The Watch Video pop-up ---------- */

/* Main pushes its video up on smaller screens and pads it past its box, which cut the top off on a phone and the bottom elsewhere.
   Here it is centred, and never taller than the space under the header. */
body .popup-video { height: auto; margin-top: 0; }
/* The box around it shrinks to the video, or a press just outside the video lands on that box and doesn't close the pop-up. */
body .popup-content-wrapper.video,
body .popup-content.has-video { height: auto; }
body .ltv { padding: 0 24px; }
body .ltv__player { max-width: min(1280px, calc((100vh - 12rem) * 16 / 9)); }
/* The controls fade while a film plays unless a keyboard is using them. A clicked button keeping focus used to hold them over the picture. */
body .ltv__player.is-playing:not(:hover):not(:has(:focus-visible)) .ltv__controls { opacity: 0; transform: translateY(10px); }
@media (max-width: 768px) {
  body .ltv { padding: 0 8px; }
  body .ltv__controls { left: 8px; right: 8px; bottom: 8px; padding: 6px 10px; gap: 8px; }
  body .ltv__btn { width: 34px; height: 34px; min-width: 34px; font-size: 13px; }
}
/* The bootcamps with no film yet: the same frame as the player, with the program's picture. */
body .lt-soon {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: calc(100% - 48px);
  max-width: min(1280px, calc((100vh - 12rem) * 16 / 9));
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  background-color: #000;
  background-clip: padding-box; /* or the undimmed picture shows through the hairline */
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
}
body .lt-soon::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.56); }
body .lt-soon > * { position: relative; }
body .lt-soon-name { --t-font: Geist; margin: 0 16px 0.75rem; color: rgba(255, 255, 255, 0.72); font-size: 12px !important; font-weight: 400 !important; line-height: 1.4 !important; letter-spacing: 0.1em; text-transform: uppercase; }
body .lt-soon-title { margin: 0 0 1.75rem; color: #f5f5f5; font-size: clamp(1.75rem, 3.33vw, 3.6rem) !important; font-weight: 300 !important; line-height: 1.1 !important; letter-spacing: -0.01em; }
@media (max-width: 768px) {
  body .lt-soon { width: calc(100% - 16px); border-radius: 18px; }
  body .lt-soon-name { margin-bottom: 0.4rem; font-size: 10px !important; }
  body .lt-soon-title { margin-bottom: 0.75rem; }
}
/* Main hides its close button, so a pop-up only closed by pressing outside it. Under the header, where it can't land on the video. */
body .popup-close {
  display: block;
  inset: 6rem 1.5rem auto auto;
  width: 44px;
  height: 44px;
  background-color: rgba(20, 20, 22, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #f5f5f5;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  transition: background-color 0.2s ease;
}
body .popup-close:hover { background-color: rgba(58, 58, 60, 0.82); }
body .popup-close:focus-visible { outline: 2px solid #f5f5f5; outline-offset: 2px; }
body .popup-close::before,
body .popup-close::after { content: ''; position: absolute; top: 50%; left: 50%; width: 16px; height: 1.5px; border-radius: 1px; background: currentColor; transform: translate(-50%, -50%) rotate(45deg); }
body .popup-close::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* ---------- The two embedded blocks, which bring their own light colours ---------- */

/* These follow the home page's voices section (.lt-voice-*). */
body .ltm-container { color: #f5f5f5; }
body .ltm-label { --t-font: Geist; font-size: 12px !important; line-height: 1.3 !important; font-weight: 400 !important; letter-spacing: 0.16em; color: #8a8a8a; }
body .ltm-review-pill { background: #0b0b0c; border-color: rgba(255, 255, 255, 0.1); box-shadow: none; }
body .ltm-review-text { --t-font: Geist; font-size: 13px !important; font-weight: 300 !important; letter-spacing: 0.02em; color: #8a8a8a; }
body .ltm-avatar-stack { border-color: #000; }
body .ltm-quote-text { --t-font: Geist; font-size: 15px !important; line-height: 1.65 !important; font-weight: 300 !important; color: #b5b5b5; }
body .ltm-author-info div:first-child { --t-font: Geist; font-size: 13px !important; line-height: 1.3 !important; font-weight: 300 !important; letter-spacing: normal; text-transform: none; color: #e6e6e6; }
body .ltm-author-info div:last-child { --t-font: Geist; font-size: 11px !important; line-height: 1.3 !important; font-weight: 300 !important; letter-spacing: 0.08em; text-transform: uppercase; color: #8a8a8a; }

body .vr-heading { color: #f5f5f5; }
body .vr-heading .vr-text-light { font-weight: 300 !important; }
body .vr-description,
body .vr-description span.vr-text-grey { --t-font: Geist; font-size: 15px !important; line-height: 1.65 !important; font-weight: 300 !important; color: #b5b5b5; }
body .vr-description span.vr-text-bold { --t-font: Geist; font-size: 15px !important; font-weight: 400 !important; color: #f5f5f5; }
body .vr-author-name { --t-font: Geist; font-size: 13px !important; font-weight: 300 !important; color: #e6e6e6; }
body .vr-author-role { --t-font: Geist; font-size: 11px !important; font-weight: 300 !important; letter-spacing: 0.08em; text-transform: uppercase; color: #8a8a8a; }
body .vr-content-left { padding: 40px; }

/* ---------- Pictures keep their colour ---------- */

/* Main's slider greys every project slide but the one in focus, from a style on the element and from its scroll script. */
body .lt-carousel-slide[class*="slider-"] { filter: none !important; }

/* ---------- Layout that main's fixed widths would otherwise cut off ---------- */

/* Main forbids its curriculum lists from wrapping and gives its hero title a minimum width wider than a phone, so they ran off the page, where its overflow:hidden cut them. */
@media (min-width: 992px) {
  body .services { column-gap: 2.5rem; }
  body .services-title { white-space: nowrap; }
}
@media (min-width: 992px) and (max-width: 1279px) {
  body .about-grid { column-gap: 2rem; }
}
@media (max-width: 991px) {
  body .services-block { min-width: 0; white-space: normal; }
  body .heading-1-copy-copy.text-weight-regular-copy-copy { min-width: 0; }
}
@media (max-width: 767px) {
  body .heading-1-copy-copy.text-weight-regular-copy-copy { margin-left: 0; }
  body .vr-content-left { padding: 32px 24px; }
}
@media (max-width: 479px) {
  body .services .heading-5.text-weight-light.small { margin-right: 0; }
  body .home-about-bottom { min-width: 0; max-width: 100%; }
}

/* ---------- The payment chooser: one payment, or 3, 6, 12 or 24 months (payChoicePass in build.mjs, pay-choice.js) ---------- */

/* Main's classes set display on buttons and lists, which would otherwise outrank [hidden]. */
body .lt-pc-card [hidden] { display: none !important; }
body .lt-pc { min-width: 0; width: 100%; margin: 0; padding: 0; border: 0; }
body .lt-pc-legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
body .lt-pc-opt {
  --t-font: Geist;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 15px 2px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  font-size: 15px !important;
  line-height: 1.3 !important;
  font-weight: 300 !important;
  color: #8a8a8a;
  transition: color 0.2s ease;
}
body .lt-pc-opt:last-of-type { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
body .lt-pc-opt:hover { color: #cfcfcf; }
body .lt-pc-opt:has(input:checked) { color: #f5f5f5; }
body .lt-pc-opt input {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  width: 14px;
  height: 14px;
  margin: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.32);
  cursor: pointer;
  transition: box-shadow 0.2s ease, background-color 0.2s ease;
}
body .lt-pc-opt input:checked { background-color: #f5f5f5; box-shadow: inset 0 0 0 1px #f5f5f5, inset 0 0 0 4px #0b0b0c; }
body .lt-pc-opt input:focus-visible { outline: 1px solid rgba(255, 255, 255, 0.6); outline-offset: 3px; }
body .lt-pc-name { flex: 1 1 auto; }
body .lt-pc-amt { white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
body .lt-pc-per { opacity: 0.6; }

body .lt-pc-sum { --t-font: Geist; display: grid; gap: 10px; width: 100%; margin: 0; }
body .lt-pc-sum div { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; }
body .lt-pc-sum dt,
body .lt-pc-sum dd { margin: 0; font-size: 13.5px !important; line-height: 1.5 !important; font-weight: 300 !important; }
body .lt-pc-sum dt { flex: none; color: #8a8a8a; }
body .lt-pc-sum dd { color: #cfcfcf; text-align: right; font-variant-numeric: tabular-nums; }
body .lt-pc-sum .lt-pc-due dt,
body .lt-pc-sum .lt-pc-due dd { font-size: 17px !important; color: #f5f5f5; }

body .lt-pc-act { display: grid; gap: 12px; width: 100%; }
body .lt-pc-act .button { display: flex; justify-content: center; width: 100%; }
body .lt-pc-note { --t-font: Geist; margin: 0; font-size: 12.5px !important; line-height: 1.5 !important; font-weight: 300 !important; color: #7d7d7d; text-align: center; }

/* The choice, repeated in the application pop-up above the email field. */
body .lt-pc-chosen { --t-font: Geist; margin: 0 0 14px; font-size: 13.5px !important; line-height: 1.5 !important; font-weight: 300 !important; color: #cfcfcf; }