/* LUNARTECH Academy: Bootcamp pricing (/pricing/bootcamps), generated by tools/pricing/bootcamps.mjs. The page is made of the Success Stories page's sections, so lunartech-stories.css and the home components'
   own stylesheets do nearly everything. This file holds what differs: the header's speed, the stage going back to the home page's six bootcamps and their pictures, the price table and the closing.
   Pure black surfaces, the home page's type and text colours. No blend modes, and nothing here uses 100vw, so the page never scrolls sideways. */

/* ---------- The header: a shorter word than SUCCESS STORIES, so a shorter loop keeps the same speed ---------- */
.bp-body .ss-hero-run { animation-duration: 22s; }
.bp-body .ss-hero-text, .bp-body .ss-feature-text { text-wrap: balance; }

/* ---------- The order: one row for each stage, lined up with the statement's two columns above it, the hairlines the home numbers' own ---------- */
.bp-steps { display: block; margin: var(--lt-space-4) 0 0; padding: 0; list-style: none; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.ss-main .bp-step { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: clamp(2rem, 6vw, 7rem); align-items: baseline; margin: 0; padding: clamp(1.7rem, 2.6vw, 2.6rem) 0; border-top: 1px solid rgba(255, 255, 255, 0.14); font: inherit; color: inherit; }
.bp-step-n { position: absolute; font-family: 'Geist', sans-serif; font-size: 11px; font-weight: 400; line-height: 1.4; letter-spacing: 0.14em; color: #8a8a8a; }
.ss-main .bp-step-h { margin: 0; padding-left: clamp(2.5rem, 4vw, 4.5rem); font-family: 'Inter', sans-serif; font-size: clamp(1.45rem, 2.2vw, 2.5rem); font-weight: 300; line-height: 1.14; letter-spacing: -0.01em; text-transform: none; color: #f5f5f5; }
.ss-main .bp-step-p { max-width: 34rem; margin: 0; font-family: 'Geist', sans-serif; font-size: 15px; font-weight: 300; line-height: 1.6; color: #9a9a9a; text-wrap: pretty; }

/* ---------- The numbers: the next section opens with its own spacing, so one gap instead of two ---------- */
.bp-body #numbers { padding-bottom: 0; }

/* ---------- The six: lunartech-stories.css tunes the stage for ten very bright pictures, so this puts back the home page's six tabs and each bootcamp picture's own brightness ---------- */
@media (min-width: 992px) {
  .bp-body .lt-prog-rail { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .bp-body .lt-prog-media::after { background:
    linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.97) 22%, rgba(0, 0, 0, 0.78) 38%, rgba(0, 0, 0, 0.2) 56%, rgba(0, 0, 0, 0) 68%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0) 34%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0) 20%); }
}
@media (min-width: 1280px) {
  .bp-body .lt-prog-tab b { display: inline; }
}
.bp-body .lt-prog-card { --bp-bright: 1; }
.bp-body .lt-prog-card[href*="ai-engineering"] { --bp-bright: 1.04; }
.bp-body .lt-prog-card[href*="data-science"], .bp-body .lt-prog-card[href*="robotics"] { --bp-bright: 0.94; }
.bp-body .lt-prog-card[href*="ai-for-executives"] { --bp-bright: 1.2; } /* the darkest picture: thin lines on black */
.bp-body .lt-prog-card .lt-prog-img { filter: brightness(var(--bp-bright)); }
.bp-body .lt-prog-card:hover .lt-prog-img, .bp-body .lt-prog-card:focus-visible .lt-prog-img { filter: brightness(calc(var(--bp-bright) * 1.12)); }
.bp-body .lt-prog-card[href*="autonomous-systems"] .lt-prog-img { object-position: 50% 82%; } /* this picture's colour is all in its lower half */
/* On a pricing page the price is what the eye looks for on each slide */
.bp-body .lt-prog-price { font-family: 'Inter', sans-serif; font-size: clamp(1.15rem, 1.5vw, 1.6rem); letter-spacing: -0.01em; color: #fff; }

/* ---------- The price: all six in one table, the rows' hairlines the home numbers' own ---------- */
.bp-sheet { margin-top: var(--lt-space-4); }
.bp-table { width: 100%; margin: 0; border-collapse: collapse; table-layout: fixed; }
.bp-c-name { width: 34%; }
.bp-c-scope { width: 14%; }
.bp-c-price { width: 17%; }
.bp-c-instal { width: 11%; }
.bp-c-aid { width: 13%; }
.bp-c-loan { width: 11%; }
.ss-main .bp-table th, .ss-main .bp-table td { padding: clamp(1.4rem, 2vw, 2rem) 1.5rem clamp(1.4rem, 2vw, 2rem) 0; border: 0; border-top: 1px solid rgba(255, 255, 255, 0.14); background: none; font-family: 'Geist', sans-serif; font-size: 15px; font-weight: 300; line-height: 1.5; letter-spacing: 0; text-align: left; text-transform: none; vertical-align: middle; color: #b5b5b5; }
.ss-main .bp-table tbody tr:last-child th, .ss-main .bp-table tbody tr:last-child td { border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.ss-main .bp-table thead th { padding: 0 1.5rem 1rem 0; border-top: 0; font-size: 11px; line-height: 1.4; letter-spacing: 0.14em; text-transform: uppercase; color: #8a8a8a; }
.ss-main .bp-table th:last-child, .ss-main .bp-table td:last-child { padding-right: 0; }

.ss-main a.bp-name { display: block; font-family: 'Inter', sans-serif; font-size: clamp(1.25rem, 1.7vw, 1.85rem); font-weight: 300; line-height: 1.14; letter-spacing: -0.015em; color: #fff; text-decoration: none; }
.ss-main a.bp-name span { display: block; color: rgba(255, 255, 255, 0.42); }
.ss-main a.bp-name:hover { color: #fff; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.bp-from { display: block; margin-bottom: 0.3rem; font-size: 12px; line-height: 1.3; color: #8a8a8a; }
.bp-num { display: block; font-family: 'Inter', sans-serif; font-size: clamp(1.8rem, 2.7vw, 3rem); font-weight: 300; line-height: 1; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; color: #fff; }
.bp-none { color: #6a6a6a; }
.bp-nb { white-space: nowrap; }

.ss-main a.bp-link { display: inline-flex; align-items: center; gap: 0.5rem; font-family: 'Geist', sans-serif; font-size: 14px; font-weight: 300; line-height: 1.4; white-space: nowrap; color: #f5f5f5; text-decoration: none; }
.bp-link svg { flex: none; width: 15px; height: 15px; }
.ss-main a.bp-link:hover { color: #fff; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ---------- The payment calculator: the choices left and the answer right, on the same two columns as the section's heading. Nothing fills: the chosen pill is a brighter hairline with a dim glow, like this page's button ---------- */
.bp-calc { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 2.6rem clamp(2rem, 6vw, 7rem); margin-top: var(--lt-space-4); scroll-margin-top: 7.5rem; }
.ss-main .bp-calc-h { margin: 0 0 2rem; font-family: 'Inter', sans-serif; font-size: clamp(1.25rem, 1.7vw, 1.85rem); font-weight: 300; line-height: 1.14; letter-spacing: -0.015em; text-transform: none; color: #fff; }
.bp-calc-set { min-width: 0; margin: 0 0 1.5rem; padding: 0; border: 0; }
.bp-calc-set:last-child { margin-bottom: 0; }
.ss-main .bp-calc-set legend { width: auto; margin: 0 0 0.7rem; padding: 0; border: 0; font-family: 'Geist', sans-serif; font-size: 11px; font-weight: 400; line-height: 1.4; letter-spacing: 0.14em; text-transform: uppercase; color: #8a8a8a; }
.bp-calc-opts { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ss-main label.bp-calc-opt { position: relative; display: inline-flex; margin: 0; font-weight: 300; cursor: pointer; }
.bp-calc-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } /* the real radio button, over the whole pill, so keyboards and screen readers get it as it is */
.bp-calc-opt span { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 1.1rem; box-sizing: border-box; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px; font-family: 'Geist', sans-serif; font-size: 14px; font-weight: 300; line-height: 1.2; white-space: nowrap; color: #8a8a8a; transition: color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; }
.bp-calc-opts--count .bp-calc-opt span { min-width: 2.75rem; padding: 0 0.4rem; font-variant-numeric: tabular-nums; } /* 44px, still a full touch target, so all five (One, 3, 6, 12, 24) stay on one line in the 256px a 320px phone leaves */
.bp-calc-opt input:hover + span { border-color: rgba(255, 255, 255, 0.3); color: #e6e6e6; }
.bp-calc-opt input:checked + span { border-color: rgba(255, 255, 255, 0.55); box-shadow: 0 0 22px rgba(255, 255, 255, 0.06), inset 0 0 14px rgba(255, 255, 255, 0.04); color: #fff; }
.bp-calc-opt input:focus-visible + span { outline: 1px solid #fff; outline-offset: 3px; }
.bp-calc-out { display: block; }
.bp-calc-label { display: block; margin-bottom: 0.7rem; font-family: 'Geist', sans-serif; font-size: 11px; font-weight: 400; line-height: 1.4; letter-spacing: 0.14em; text-transform: uppercase; color: #8a8a8a; }
.bp-calc-rows { display: block; margin-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.bp-calc-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; padding: 0.8rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.14); font-family: 'Geist', sans-serif; font-size: 14px; font-weight: 300; line-height: 1.5; color: #9a9a9a; }
.bp-calc-row[hidden] { display: none; }
.bp-calc-row span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; color: #f5f5f5; }
.bp-calc-res .bp-link { margin-top: 1.4rem; }
.ss-main .bp-calc-note { margin: 0.9rem 0 0; font-family: 'Geist', sans-serif; font-size: 12px; font-weight: 300; line-height: 1.5; color: #8a8a8a; }
@media (prefers-reduced-motion: reduce) {
  .bp-calc-opt span { transition: none; }
}

/* How you can pay, in the words the bootcamp pages use */
.bp-notes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.4rem clamp(1.5rem, 3vw, 3.5rem); margin-top: var(--lt-space-4); }
.ss-main .bp-note h3 { margin: 0 0 0.75rem; font-family: 'Geist', sans-serif; font-size: 11px; font-weight: 400; line-height: 1.4; letter-spacing: 0.14em; text-transform: uppercase; color: #f5f5f5; }
.ss-main .bp-note p { margin: 0; font-family: 'Geist', sans-serif; font-size: 14.5px; font-weight: 300; line-height: 1.6; color: #9a9a9a; text-wrap: pretty; }
.ss-main .bp-note a { color: #f5f5f5; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; white-space: nowrap; }
.ss-main .bp-note a:hover { color: #fff; }

/* ---------- The closing: the Success Stories page's button ---------- */
.bp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin-top: 1.8rem; }
.bp-body a.lt-prog-go { text-decoration: none; }
.bp-body a.lt-prog-go:hover { border-color: rgba(255, 255, 255, 0.36); background-color: transparent; color: #fff; box-shadow: 0 0 28px rgba(255, 255, 255, 0.11), inset 0 0 18px rgba(255, 255, 255, 0.07); }
@media (hover: hover) {
  .bp-body a.lt-prog-go:hover .lt-prog-go-arrow svg:first-child { transform: translateX(24px); }
  .bp-body a.lt-prog-go:hover .lt-prog-go-arrow svg:last-child { transform: none; }
}

/* ---------- Narrower screens ---------- */
@media (max-width: 1199px) {
  .bp-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* The table reads down the page instead of across it, so nothing scrolls sideways: the name, the price, then one labelled line for each thing the program offers */
@media (max-width: 991px) {
  .bp-calc { grid-template-columns: minmax(0, 1fr); }
  .ss-main .bp-step { grid-template-columns: minmax(0, 1fr); row-gap: 0.8rem; }
  .ss-main .bp-step-p { padding-left: clamp(2.5rem, 4vw, 4.5rem); }
  .bp-table, .bp-table tbody, .bp-table tr, .ss-main .bp-table th, .ss-main .bp-table td { display: block; }
  .bp-table thead, .bp-table colgroup { display: none; }
  .bp-table tr { padding: 1.7rem 0 1.8rem; border-top: 1px solid rgba(255, 255, 255, 0.14); }
  .bp-table tbody tr:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
  .ss-main .bp-table th, .ss-main .bp-table td { padding: 0; border: 0; }
  .ss-main .bp-table tbody tr:last-child th, .ss-main .bp-table tbody tr:last-child td { border: 0; }
  .ss-main .bp-table tbody th { margin-bottom: 1rem; }
  .ss-main .bp-table td { padding: 0.3rem 0; }
  .ss-main .bp-table td[data-col] { display: grid; grid-template-columns: 7rem minmax(0, 1fr); column-gap: 1rem; align-items: baseline; }
  .ss-main .bp-table td[data-col]::before { content: attr(data-col); font-size: 13px; line-height: 1.5; color: #8a8a8a; }
  .ss-main .bp-table td.bp-td-go { padding-top: 0.9rem; }
  .bp-from { margin-bottom: 0.2rem; }
  .bp-num { font-size: clamp(1.9rem, 6vw, 2.6rem); }
}
@media (max-width: 599px) {
  .bp-notes { grid-template-columns: minmax(0, 1fr); gap: 1.9rem; }
}