/* LUNARTECH course page (courses/fundamentals-to-linear-algebra.html).
   Liquid glass on a pure black page: near-black smoked panels with a thin specular rim and a faint pointer-
   following highlight. Type stays ultra-minimal: Geist 300, small, dim, hairlines; no bold.
   Nothing here uses 100vw, and no ancestor of a glass panel fades with opacity (that would turn it
   into a backdrop root and blank the blur), so reveals sit on the panels and text themselves. */

body.lc-body {
  --lc-bg: #000;
  --lc-ink: #f3f4f7;
  --lc-dim: rgba(255, 255, 255, 0.62);
  --lc-faint: rgba(255, 255, 255, 0.4);
  --lc-hair: rgba(255, 255, 255, 0.09);
  --lc-blue: #8aa2d6;
  --lc-silver: #c6cad2;
  --lc-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --lc-nav: 96px; /* where the sticky tab bar rests, just under the navbar pill */
  margin: 0;
  background-color: var(--lc-bg);
  color: var(--lc-ink);
  font-family: 'Geist', 'Inter', sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.lc-body ::selection { background: rgba(255, 255, 255, 0.22); color: #fff; }

/* The page sits on pure black, with no glow behind it. The markup still holds an empty .lc-bg, so it stays hidden. */
.lc-bg { display: none; }

.lc-main { position: relative; z-index: 1; }

/* ───────────── layout primitives ───────────── */
.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; } }

/* NB: no mix-blend-mode anywhere on this page. A blend-mode element inside .lc-main makes Chromium stop feeding
   the page to sibling backdrop-filters (the sticky bar showed everything under it unblurred). */
/* :where() keeps these resets at class-level specificity, so each component rule below can override them */
.lc-main :where(h1, h2, h3, h4, p, ul, dl, dd, figure, blockquote) { margin: 0; padding: 0; font-family: 'Geist', 'Inter', sans-serif; text-transform: none; }
.lc-main :where(ul) { list-style: none; }
.lc-main :where(blockquote) { border: 0; }
.lc-main :where(a) { color: inherit; text-decoration: none; }
.lc-main :where(img) { max-width: 100%; }
.lc-main :focus-visible { outline: 1px solid rgba(255, 255, 255, 0.8); outline-offset: 3px; border-radius: 6px; }

.lc-label { display: inline-flex; align-items: center; gap: 12px; font-size: 11px; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; color: #a3a3a3; }
.lc-label::before { content: ''; width: 24px; height: 1px; background: rgba(255, 255, 255, 0.28); }
.lc-main h2.lc-h2 { font-size: clamp(1.7rem, 2.6vw, 2.35rem); font-weight: 300; line-height: 1.18; letter-spacing: -0.02em; color: var(--lc-ink); text-wrap: balance; }
.lc-main h2.lc-h2 em { font-style: normal; color: var(--lc-faint); }
.lc-p { font-size: 15.5px; font-weight: 300; line-height: 1.8; color: var(--lc-dim); }
.lc-p + .lc-p { margin-top: 1.2rem; }

.lc-section { position: relative; padding: clamp(4.5rem, 8vw, 7.5rem) 0 0; scroll-margin-top: calc(var(--lc-nav) + 64px); }
.lc-split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.lc-split-head { display: flex; flex-direction: column; gap: 1.4rem; position: sticky; top: calc(var(--lc-nav) + 80px); }
.lc-split-head .lc-p { max-width: 22rem; }
@media (max-width: 991px) {
  .lc-split { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
  .lc-split-head { position: static; }
}

/* ───────────── liquid glass ─────────────
   A pane of smoked glass with thickness, not a dark box with an outline.
   body: near black, from a black tint and a much dimmer backdrop together, so anything behind survives only as faint
   shapes; a very fine grain stops banding in the dark blur. The user wants this dark: keep white sheens out of it.
   bevel: a lit top edge, a dark underside and a black contact line where the pane meets the page.
   rim: 1px of light gathered at two opposite corners, nearly gone along the sides (a linear gradient reads as a drawn
   stroke). Radial gradients anchored to the corners, because a conic one is measured by angle from the centre, so on a wide
   pill its "corner" light lands in the middle of the top edge.
   glow: a highlight that follows the pointer.
   The banner's cover card goes further and has a clear rim that refracts: see "the cover card" below. */
.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; }

/* reveal on scroll: on leaf elements only */
.lc-js [data-reveal] { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity 0.9s var(--lc-ease), transform 1.1s var(--lc-ease), filter 0.9s var(--lc-ease); transition-delay: calc(var(--i, 0) * 70ms); }
.lc-js [data-reveal='text'] { filter: blur(6px); }
.lc-js [data-reveal].is-in { opacity: 1; transform: none; filter: none; }

/* ───────────── buttons ───────────── */
.lc-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 46px; padding: 0 22px; border-radius: 9999px; border: 0; cursor: pointer; font: 400 13px/1 'Inter', 'Geist', sans-serif; letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; isolation: isolate; transition: transform 0.45s var(--lc-ease), box-shadow 0.45s var(--lc-ease), background-color 0.3s; }
.lc-btn svg { width: 15px; height: 15px; flex: none; transition: transform 0.45s var(--lc-ease); }
.lc-btn:hover svg { transform: translateX(3px); }
.lc-btn::after { /* sheen sweeping across on hover */
  content: ''; position: absolute; inset: 0; z-index: -1; transform: translateX(-120%) skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.32), transparent); transition: transform 0.9s var(--lc-ease);
}
.lc-btn:hover::after { transform: translateX(120%) skewX(-18deg); }
/* Enroll: the same button as the header's "Get Started Free" (a dark taupe glass pill with a thin light beam running
   round its edge, turning green and growing a little on hover). Copied from lunartech-header-hero.css and renamed. */
.lc-main .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); }
.lc-main .lc-shimmer-btn:hover { transform: scale(1.05); box-shadow: 0 0 40px 8px rgba(100, 100, 100, .25); }
.lc-main .lc-shimmer-btn::before { content: ""; position: absolute; inset: 0; z-index: 0; }
.lc-main .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; }
.lc-main .lc-shimmer-gradient { position: absolute; inset: -200%; width: 400%; height: 400%; animation: none; z-index: 0; }
.lc-main .lc-shimmer-btn:hover .lc-shimmer-gradient { animation: lt-rotate-gradient var(--speed) linear infinite; }
.lc-main .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)); }
.lc-main .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; }
.lc-main .lc-shimmer-label, .lc-main .lc-shimmer-content svg { position: relative; z-index: 10; white-space: nowrap; flex: none; }
.lc-main .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; }
.lc-main .lc-shimmer-btn:hover .lc-shimmer-border-beam { animation: lt-border-beam-rotation 4s infinite linear; opacity: 1; }
.lc-main .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; }
.lc-main .lc-shimmer-btn:hover .lc-shimmer-bg { background: rgba(100, 140, 110, 0.4); }
.lc-main .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); }
.lc-main .lc-shimmer-btn:hover .lc-shimmer-beam-container { padding: 0.75px; }
.lc-main .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); }
.lc-main .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); }
.lc-main .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); }
.lc-main .lc-shimmer-btn:hover .lc-shimmer-beam-container::after { inset: .75px; }

.lc-btn-ghost { color: var(--lc-ink); background: linear-gradient(135deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.008)), rgba(0, 0, 0, 0.5); -webkit-backdrop-filter: blur(20px) saturate(115%) brightness(0.5); backdrop-filter: blur(20px) saturate(115%) brightness(0.5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.09), 0 8px 26px -10px rgba(0, 0, 0, 0.7); }
.lc-btn-ghost:hover { transform: translateY(-2px); background: linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)), rgba(0, 0, 0, 0.5); }

/* ───────────── banner ───────────── */
.lc-banner { position: relative; overflow: hidden; min-height: clamp(660px, 92vh, 940px); display: flex; align-items: flex-end; padding: 150px 0 clamp(5.5rem, 9vw, 7.5rem); box-sizing: border-box; }
/* smoked glass rings behind the banner card: real glass shapes for the card to refract */
.lc-banner-art { position: absolute; right: -4%; top: 0; height: 100%; aspect-ratio: 1; pointer-events: none; opacity: 0.6; background: url('/images/lunartech/cta/cta-glass-ring-dark.webp') center / cover no-repeat; -webkit-mask-image: radial-gradient(closest-side, #000 48%, transparent 100%), linear-gradient(to bottom, #000 58%, transparent 97%); -webkit-mask-composite: source-in; mask-image: radial-gradient(closest-side, #000 48%, transparent 100%), linear-gradient(to bottom, #000 58%, transparent 97%); mask-composite: intersect; animation: lc-float 26s ease-in-out infinite alternate; will-change: transform; }
@keyframes lc-float { from { transform: translate3d(0, 0, 0) rotate(-3deg) scale(1); } to { transform: translate3d(-3%, 1.5%, 0) rotate(4deg) scale(1.04); } }
.lc-grid { position: absolute; inset: 0; width: 100%; height: 100%; display: block; -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%); mask-image: linear-gradient(to bottom, #000 62%, transparent 100%); }
.lc-banner-scrim { position: absolute; inset: 0; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, #000 66%, transparent 100%); mask-image: linear-gradient(to bottom, #000 66%, transparent 100%); background: linear-gradient(90deg, rgba(0, 0, 0, 0.97) 0%, rgba(0, 0, 0, 0.92) 30%, rgba(0, 0, 0, 0.55) 48%, rgba(0, 0, 0, 0) 66%); }
.lc-banner-inner { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: clamp(2rem, 5vw, 6rem); align-items: end; }

.lc-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 2.2rem; font-size: 12px; letter-spacing: 0.02em; color: var(--lc-faint); }
.lc-crumbs a { color: var(--lc-faint); transition: color 0.3s; }
.lc-crumbs a:hover { color: var(--lc-ink); }
.lc-crumbs span[aria-hidden] { opacity: 0.5; }
.lc-crumbs [aria-current] { color: var(--lc-dim); }

.lc-main h1.lc-title { font-size: clamp(2.6rem, 6.1vw, 5.75rem); font-weight: 300; line-height: 1.02; letter-spacing: -0.04em; color: #fff; }
.lc-title-lead { display: block; color: rgba(255, 255, 255, 0.42); }
.lc-main .lc-title-long h1.lc-title { font-size: clamp(2.2rem, 4.5vw, 4.1rem); line-height: 1.06; }
.lc-lede { max-width: 36rem; margin-top: 1.9rem; font-size: clamp(16px, 1.3vw, 18px); font-weight: 300; line-height: 1.6; color: rgba(255, 255, 255, 0.86); }
.lc-lede span { display: block; margin-top: 0.3rem; color: rgba(255, 255, 255, 0.46); }
.lc-cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 2.4rem; }
/* Banner buttons: a light, frosted "Enroll now" beside a clear, hairline "Try for free", so the main action reads first.
   The header's dark shimmer pill stays on the sticky bar and the closing card. */
.lc-banner .lc-cta-row { gap: 10px; }
.lc-banner .lc-shimmer-btn { --lc-btn-h: 50px; box-shadow: none; }
.lc-banner .lc-shimmer-btn:hover { transform: none; box-shadow: none; }
.lc-banner .lc-shimmer-beam-container, .lc-banner .lc-shimmer-gradient, .lc-banner .lc-shimmer-border-beam { display: none; }
.lc-banner .lc-shimmer-btn::after { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
/* The fill is a gradient in both states and has no transition: a gradient can't be animated, so swapping it for a flat
   colour under a background transition left the pill almost transparent for a moment (a grey flash on hover and on leave). */
.lc-banner .lc-shimmer-bg { inset: 0; background: #f2f3f5; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; transition: none; }
.lc-banner .lc-shimmer-btn:hover .lc-shimmer-bg { background: #fff; }
.lc-banner .lc-shimmer-content { padding: 0 24px; font-size: 13.5px; color: #08090b; }
.lc-banner .lc-btn-ghost { height: 50px; padding: 0 24px; font-size: 13.5px; color: rgba(255, 255, 255, 0.86); background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); }
.lc-banner .lc-btn-ghost:hover { transform: none; color: #fff; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42); }
.lc-proof { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 2.4rem; font-size: 13px; letter-spacing: 0.01em; color: rgba(255, 255, 255, 0.42); }
.lc-proof b { font-weight: 400; color: rgba(255, 255, 255, 0.88); }
.lc-proof i { width: 1px; height: 12px; background: rgba(255, 255, 255, 0.16); }

/* the cover card: a thick pane. Its outer 14px is clear glass, where the banner's grid lines bend as they pass under the rim
   (drawn by the canvas: BAND in the grid code of js/lunartech-course.js must match this 14px); inside that sits the frosted
   panel, recessed, on ::after. So the card itself has no backdrop-filter, and it must not fade with opacity either: that would
   make it a backdrop root and blank the frost, which is why it has no entrance at all.
   It never moves, and nothing glows across its face. Light lives only on the rim, in a thin arc where the pointer is. */
@property --lc-lit { syntax: '<number>'; inherits: true; initial-value: 0; }
.lc-banner-card { justify-self: end; width: 100%; max-width: 480px; padding: 14px; border-radius: 30px; transition: --lc-lit 0.7s ease; }
.lc-banner-card.is-lit { --lc-lit: 1; }
.lc-js .lc-banner-card[data-reveal] { opacity: 1; transform: none; filter: none; transition: --lc-lit 0.7s ease; }
.lc-banner-card.lc-glass { background-color: rgba(0, 0, 0, 0.45); -webkit-backdrop-filter: none; backdrop-filter: none; }
.lc-banner-card.lc-glass::after {
  inset: 14px; border-radius: 16px; opacity: 1; transition: none;
  background: rgba(0, 0, 0, 0.62);
  -webkit-backdrop-filter: blur(20px) saturate(115%) brightness(0.42);
  backdrop-filter: blur(20px) saturate(115%) brightness(0.42);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04), 0 0 14px rgba(0, 0, 0, 0.4);
}
.lc-banner-card.lc-glass::before {
  background:
    radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, calc(var(--lc-lit) * 0.55)), rgba(255, 255, 255, 0) 70%),
    var(--lc-rim);
}
/* the cover is inlaid in the glass: its corners are concentric with the card's (30px outer - 14px padding) */
.lc-card-cover { position: relative; overflow: hidden; border-radius: 16px; aspect-ratio: 1080 / 617; background: #0c0c0c; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 16px 36px -16px rgba(0, 0, 0, 0.95); }
.lc-card-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lc-facts { padding: 10px 12px 6px; }
.lc-fact { display: flex; align-items: center; gap: 14px; padding: 13px 0; font-size: 13px; }
.lc-fact + .lc-fact { border-top: 1px solid var(--lc-hair); }
.lc-fact svg { width: 15px; height: 15px; flex: none; color: var(--lc-faint); }
.lc-fact dt { color: var(--lc-faint); }
.lc-fact dd { margin-left: auto; color: #e4e6ec; text-align: right; }

@media (max-width: 991px) {
  .lc-banner { min-height: 0; padding-top: 130px; }
  .lc-banner-inner { grid-template-columns: minmax(0, 1fr); gap: 3rem; }
  .lc-banner-card { justify-self: stretch; max-width: 520px; }
  .lc-banner-scrim { background: linear-gradient(180deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.88) 55%, rgba(0, 0, 0, 0.6) 100%); }
}

/* ───────────── sticky section bar ───────────── */
/* as wide as the navbar pill above it: the same gutter as .lt-nav-shell (24px, 16px under 640px), no extra inset */
.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; } }
/* Laid out like the navbar above it, in three zones: the course name under the logo (only once scrolled, opposite the
   Enroll button), the tabs centred under the nav links, Enroll under Get Started Free. Near-black with one even hairline
   like the navbar's, no highlights or pointer glow: this bar should recede, so it stays out of the page's way. */
.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; }
/* the active tab: white text and a thin line under it, as wide as its word (the js moves this box; the line is inset by the tab's padding) */
.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); }
/* "Enroll in course" has no entrance at all: it is simply there once the banner buttons have scrolled away. Only its
   hover (grow and glow, like the header's Get Started Free) is animated. */
.lc-main .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; }
/* nothing in the bar moves while the page is still settling (fonts arriving, the first layout): the highlight and the
   Enroll button appear already in place. js adds .is-ready shortly after load; from then on they animate as normal. */
.lc-tabs:not(.is-ready) .lc-tabs-ink, .lc-tabs:not(.is-ready) .lc-tabs-cta { transition: none !important; }
.lc-main .lc-tabs.has-cta .lc-tabs-cta { opacity: 1; transform: none; pointer-events: auto; }
.lc-main .lc-tabs.has-cta .lc-tabs-cta:hover { transform: scale(1.05); }
/* a calm outline: the bright spot that circles the edge of the header's button is left off this one (it read as a stray
   dot beside the arrow), so it has a steady hairline instead; hovering brings the moving light back, like the header's */
.lc-main .lc-tabs-cta .lc-shimmer-beam-container::before { background: rgba(255, 255, 255, 0.11); animation: none; filter: none; }
.lc-main .lc-tabs-cta:hover .lc-shimmer-beam-container::before { animation: lt-beam-spin 6s linear infinite; }
/* its width and right margin are set from the header's "Get Started Free" (js); inside, the label sits at the left
   and the arrow at the right with that button's 20px padding, so the text and the arrow line up with its own */
.lc-main .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%); }
  .lc-main .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; }
  .lc-main .lc-tabs-cta { display: none; }
}

/* ───────────── overview ───────────── */
.lc-overview-body { display: flex; flex-direction: column; gap: 3.2rem; }
.lc-numbers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lc-number { padding-right: 1.5rem; }
.lc-number strong { display: block; font-size: clamp(1.7rem, 2.6vw, 2.3rem); font-weight: 300; letter-spacing: -0.02em; color: #fff; line-height: 1; }
.lc-number span { display: block; margin-top: 0.8rem; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--lc-faint); }
@media (max-width: 639px) {
  .lc-numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.6rem; }
}

/* ───────────── what you'll learn ───────────── */
.lc-outcomes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.lc-outcome { padding: 2rem 2rem 2.1rem; border-radius: 26px; transition: transform 0.7s var(--lc-ease), background-color 0.4s; }
.lc-outcome:hover { transform: translateY(-4px); }
.lc-outcome-ic { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 1.6rem; border-radius: 50%; color: #d8dbe2; background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
.lc-outcome-ic svg { width: 17px; height: 17px; }
.lc-main h3.lc-h3 { font-size: 1.12rem; font-weight: 300; line-height: 1.35; letter-spacing: -0.01em; color: #fff; }
.lc-outcome .lc-p { margin-top: 0.8rem; font-size: 14px; line-height: 1.75; }
@media (max-width: 639px) { .lc-outcomes { grid-template-columns: minmax(0, 1fr); } }

/* ───────────── course outline ───────────── */
.lc-outline-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 12.5px; color: var(--lc-faint); }
.lc-outline-meta i { width: 1px; height: 12px; background: rgba(255, 255, 255, 0.18); align-self: center; }
.lc-modules { display: flex; flex-direction: column; gap: 12px; position: relative; }
.lc-acc { border-radius: 24px; transition: background-color 0.5s; }
.lc-acc-btn { display: flex; align-items: center; gap: clamp(14px, 2vw, 26px); width: 100%; padding: 1.5rem 1.6rem; border: 0; background: none; cursor: pointer; text-align: left; font: inherit; color: inherit; border-radius: inherit; }
.lc-acc-num { flex: none; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--lc-faint); width: 3.4rem; }
.lc-acc-title { flex: 1 1 auto; min-width: 0; font-size: clamp(1rem, 1.3vw, 1.12rem); font-weight: 300; line-height: 1.4; letter-spacing: -0.01em; color: #f1f2f6; }
.lc-acc-icon { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); transition: background-color 0.4s, transform 0.6s var(--lc-ease); }
.lc-acc-icon::before, .lc-acc-icon::after { content: ''; position: absolute; left: 50%; top: 50%; width: 11px; height: 1px; background: #d7dae2; transform: translate(-50%, -50%); transition: transform 0.6s var(--lc-ease); }
.lc-acc-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.lc-acc.is-open .lc-acc-icon { background: rgba(255, 255, 255, 0.04); }
.lc-acc.is-open .lc-acc-icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.lc-acc-btn:hover .lc-acc-icon { background: rgba(255, 255, 255, 0.06); }
.lc-acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.7s var(--lc-ease); }
.lc-acc.is-open .lc-acc-panel { grid-template-rows: 1fr; }
.lc-acc-panel > div { overflow: hidden; min-height: 0; }
.lc-acc-body { padding: 0 1.6rem 1.8rem calc(1.6rem + 3.4rem + clamp(14px, 2vw, 26px)); opacity: 0; transform: translateY(-6px); transition: opacity 0.5s ease, transform 0.7s var(--lc-ease); }
.lc-acc.is-open .lc-acc-body { opacity: 1; transform: none; transition-delay: 0.12s; }
.lc-acc-body .lc-p { font-size: 14px; max-width: 40rem; padding-right: 3rem; }
.lc-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1.4rem; padding-right: 3rem; }
.lc-tag { padding: 7px 13px; border-radius: 9999px; font-size: 12px; color: rgba(255, 255, 255, 0.62); background: rgba(255, 255, 255, 0.02); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
@media (max-width: 639px) {
  .lc-acc-btn { padding: 1.25rem 1.1rem; gap: 12px; }
  .lc-acc-num { width: 2.2rem; letter-spacing: 0.1em; }
  .lc-acc-body { padding: 0 1.1rem 1.5rem 1.1rem; }
  .lc-acc-body .lc-p, .lc-tags { padding-right: 0; }
}

/* ───────────── where it's used ─────────────
   The section is a neural network, because that is what the course explains: the modules are the input layer, the roles a glass core,
   the fields where the work happens the output. One role is always lit, and its statement stands large below. No boxes around
   the sides, just lines on black. Below 1024px there's no room for lines, so it folds into a list with everything written out.
   The roles and fields are this course's own; the layout holds for any course. */
.lc-diploma-sec + .lc-uses-sec { padding-top: 0; } /* the certificate already leaves generous space below itself */
.lc-uses-sec .lc-why-title .lc-h2 { max-width: none; }
.lc-net-roles, .lc-net-col { margin: 0; padding: 0; list-style: none; }
.lc-net-cap, .lc-net-col, .lc-net-lines, .lc-net-read, .lc-net-role > button { display: none; }
.lc-net-role > button { display: block; padding: 0; border: 0; background: none; color: #fff; font: 300 16px/1.35 'Geist', 'Inter', sans-serif; text-align: left; }

/* the list, below 1024px */
.lc-net-roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 44px; padding: 6px 28px 8px; border-radius: 28px; }
.lc-net-role { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: start; align-items: center; column-gap: 12px; padding: 24px 0 26px; border-top: 1px solid var(--lc-hair); }
.lc-net-role:nth-child(-n + 2) { border-top: 0; }
.lc-net-marks { display: flex; align-items: center; }
.lc-net-marks i { display: flex; align-items: center; justify-content: center; width: 12px; height: 12px; }
.lc-net-marks i::before { content: ''; width: 3px; height: 3px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); }
.lc-net-marks i.is-on::before { width: 6px; height: 6px; background: rgba(255, 255, 255, 0.92); }
.lc-net-detail { grid-column: 1 / -1; margin-top: 10px; }
.lc-net-does { font-size: 16px; font-weight: 300; line-height: 1.5; letter-spacing: -0.005em; color: #f3f4f7; }
.lc-net-does span + span { color: rgba(255, 255, 255, 0.5); }
.lc-net-mods-text, .lc-net-where-text { margin-top: 12px; font-size: 12.5px; font-weight: 300; line-height: 1.5; color: rgba(255, 255, 255, 0.42); }
.lc-net-where-text { margin-top: 3px; }
@media (max-width: 767px) {
  .lc-net-roles { grid-template-columns: minmax(0, 1fr); padding: 2px 22px 4px; border-radius: 26px; }
  .lc-net-role:nth-child(2) { border-top: 1px solid var(--lc-hair); }
}

/* the network, from 1024px */
@media (min-width: 1024px) {
  .lc-net { position: relative; display: grid; grid-template-columns: 150px minmax(90px, 1fr) minmax(270px, 340px) minmax(90px, 1fr) 240px; }
  .lc-net-lines { display: block; position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
  .lc-net-link { fill: none; stroke: rgba(255, 255, 255, 0.12); stroke-width: 1; transition: stroke 0.45s ease; }
  .lc-net-link.is-on { stroke: rgba(255, 255, 255, 0.72); }
  .lc-net.is-peek .lc-net-link.is-on { stroke: rgba(255, 255, 255, 0.12); }
  .lc-net-link.is-peek, .lc-net.is-peek .lc-net-link.is-peek.is-on { stroke: rgba(255, 255, 255, 0.72); }
  .lc-net-pulse { fill: none; stroke: #fff; stroke-width: 1.6; stroke-dasharray: 0.18 1; stroke-dashoffset: 0.18; }

  .lc-net-cap { display: block; margin-bottom: 26px; font-size: 11px; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 255, 255, 0.4); }
  .lc-net-cap:nth-of-type(1) { grid-column: 1; }
  .lc-net-cap:nth-of-type(2) { grid-column: 3; text-align: center; }
  .lc-net-cap:nth-of-type(3) { grid-column: 5; }

  .lc-net-col { position: relative; z-index: 3; grid-row: 2; display: flex; flex-direction: column; justify-content: space-between; padding: 27px 0; font-size: 13.5px; font-weight: 300; line-height: 20px; color: rgba(255, 255, 255, 0.44); }
  .lc-net-col li { display: flex; align-items: center; font-size: 14.5px; line-height: 20px; transition: color 0.3s; white-space: nowrap; } /* set on the li: the template styles every li itself */
  .lc-net-col li.is-on { color: #fff; }
  .lc-net.is-peek .lc-net-col li.is-on { color: rgba(255, 255, 255, 0.44); }
  .lc-net .lc-net-col li:hover { color: #fff; }
  .lc-net-mods { grid-column: 1; }
  .lc-net-mods li { gap: 10px; }
  .lc-net-mods b { flex: none; width: 18px; font-size: 10.5px; font-weight: 400; letter-spacing: 0.1em; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.28); }
  .lc-net-mods li::after, .lc-net-places li::before { content: ''; flex: none; width: 5px; height: 5px; border-radius: 50%; background: #111; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.26); transition: background-color 0.3s, box-shadow 0.3s; }
  .lc-net-mods li::after { margin-left: auto; margin-right: -2.5px; }
  .lc-net-places { grid-column: 5; }
  .lc-net-places li { gap: 13px; }
  .lc-net-places li::before { margin-left: -2.5px; }
  .lc-net-col li.is-on::after, .lc-net-col li.is-on::before { background: #fff; box-shadow: 0 0 0 1px #fff; }
  .lc-net.is-peek .lc-net-col li.is-on::after, .lc-net.is-peek .lc-net-col li.is-on::before { background: #111; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.26); }
  .lc-net .lc-net-col li:hover::after, .lc-net .lc-net-col li:hover::before { background: #fff; box-shadow: 0 0 0 1px #fff; }

  /* the core: a pane of dark glass the lines plug into, with a node on each edge of each role */
  .lc-net-roles { z-index: 1; grid-column: 3; grid-row: 2; display: block; padding: 10px; border-radius: 26px; }
  .lc-net-role { position: relative; display: block; padding: 0; border: 0; }
  .lc-net-marks, .lc-net-detail { display: none; }
  .lc-net-role > button { width: 100%; height: 54px; border-radius: 14px; color: rgba(255, 255, 255, 0.46); font-size: 15px; font-weight: 300; text-align: center; cursor: pointer; transition: color 0.3s; }
  .lc-net-role > button:hover { color: rgba(255, 255, 255, 0.85); }
  .lc-net-role.is-on > button { color: #fff; background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.07) 50%, rgba(255, 255, 255, 0) 100%); }
  .lc-net.is-peek .lc-net-role.is-on > button { color: rgba(255, 255, 255, 0.46); background: none; }
  .lc-net-role.is-peek > button, .lc-net.is-peek .lc-net-role.is-peek.is-on > button { color: #fff; }
  .lc-net-role::before, .lc-net-role::after { content: ''; position: absolute; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: #111; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.26); transition: background-color 0.3s, box-shadow 0.3s; }
  .lc-net-role::before { left: -12.5px; }
  .lc-net-role::after { right: -12.5px; }
  .lc-net-role.is-on::before, .lc-net-role.is-on::after { background: var(--lc-silver); box-shadow: 0 0 0 3px rgba(198, 202, 210, 0.2); }
  .lc-net.is-peek .lc-net-role.is-on::before, .lc-net.is-peek .lc-net-role.is-on::after { background: #111; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.26); }
  .lc-net .lc-net-role.is-peek::before, .lc-net .lc-net-role.is-peek::after { background: #fff; box-shadow: 0 0 0 1px #fff; }

  /* the statement: the one thing to read, one sentence to a line, so its height never changes */
  .lc-net-read { display: block; grid-column: 1 / -1; grid-row: 3; margin-top: clamp(2.6rem, 4vw, 3.6rem); text-align: center; }
  .lc-net-read-role { display: block; margin-bottom: 1.1rem; font-size: 11px; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; color: var(--lc-silver); }
  .lc-net-read-text { font-size: clamp(1.4rem, 2.35vw, 2.15rem); font-weight: 300; line-height: 1.24; letter-spacing: -0.022em; color: #fff; }
  .lc-net-read-text span { display: block; white-space: nowrap; }
  .lc-net-read-text span + span { color: rgba(255, 255, 255, 0.42); }

  /* it arrives once, left to right, as a signal would */
  .lc-js .lc-net:not(.is-in) .lc-net-col, .lc-js .lc-net:not(.is-in) .lc-net-roles, .lc-js .lc-net:not(.is-in) .lc-net-cap, .lc-js .lc-net:not(.is-in) .lc-net-read { opacity: 0; }
  .lc-js .lc-net.is-in:not(.is-drawn) .lc-net-mods { transition: opacity 0.7s ease; }
  .lc-js .lc-net.is-in:not(.is-drawn) .lc-net-cap { transition: opacity 0.7s ease; }
  .lc-js .lc-net.is-in:not(.is-drawn) .lc-net-roles { transition: opacity 0.7s ease 0.5s; }
  .lc-js .lc-net.is-in:not(.is-drawn) .lc-net-places { transition: opacity 0.7s ease 1.1s; }
  .lc-js .lc-net.is-in:not(.is-drawn) .lc-net-read { transition: opacity 0.8s ease 1.3s; }
  .lc-js .lc-net:not(.is-drawn) .lc-net-link { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
  .lc-js .lc-net.is-in:not(.is-drawn) .lc-net-link { stroke-dashoffset: 0; transition: stroke-dashoffset 0.9s ease-out 0.2s; }
  .lc-js .lc-net.is-in:not(.is-drawn) .lc-net-link[data-side='places'] { transition-delay: 0.85s; }
}
@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  .lc-net-link, .lc-net-col li, .lc-net-role > button { transition: none; }
}

/* ───────────── the world ─────────────
   Words over a turning globe of 0s and 1s (js/lunartech-globe.js). The globe is dim and quieter still behind the words, and nothing in
   it is orange: silver on black. Its faint body is drawn by ::before, placed by the script and fading out where the planet runs off the stage. Course-neutral. */
.lc-world-stage { position: relative; display: flex; align-items: center; overflow: hidden; min-height: clamp(780px, 100vh, 1120px); min-height: clamp(780px, 100svh, 1120px); }
.lc-world-stage::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle var(--lc-gr, 0px) at var(--lc-gx, 50%) var(--lc-gy, 50%), rgba(190, 198, 214, 0.05) 0%, rgba(190, 198, 214, 0.024) 72%, rgba(190, 198, 214, 0.012) 99.6%, rgba(190, 198, 214, 0) 100%); -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 100%); mask-image: linear-gradient(to bottom, #000 58%, transparent 100%); }
.lc-world-globe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity 1.8s ease; }
.lc-world-globe.is-in { opacity: 1; }
.lc-world-copy { position: relative; z-index: 1; text-align: center; }
.lc-world-kicker { margin-bottom: 1.5rem; font-size: 14px; font-weight: 300; line-height: 1.4; color: rgba(255, 255, 255, 0.62); }
.lc-main h2.lc-world-title { font-size: clamp(2rem, 3.4vw, 3.25rem); font-weight: 300; line-height: 1.12; letter-spacing: -0.028em; color: #fff; text-wrap: balance; }
.lc-main h2.lc-world-title em { display: block; font-style: normal; color: rgba(255, 255, 255, 0.46); }
.lc-world-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem clamp(1.6rem, 3vw, 3rem); max-width: 60rem; margin: clamp(2.4rem, 4vw, 3.4rem) auto 0; }
.lc-main h3.lc-world-role { margin-bottom: 0.7rem; font-size: 11px; font-weight: 400; line-height: 1.4; letter-spacing: 0.2em; margin-right: -0.2em; text-transform: uppercase; color: #c6cad2; }
.lc-world-cols p { font-size: 15.5px; font-weight: 300; line-height: 1.5; color: rgba(255, 255, 255, 0.86); text-wrap: balance; }
@media (max-width: 767px) {
  .lc-world-stage { min-height: clamp(640px, 88vh, 760px); min-height: clamp(640px, 88svh, 760px); }
  .lc-world-cols { grid-template-columns: minmax(0, 1fr); max-width: 22rem; gap: 1.4rem; margin-top: 2rem; }
  .lc-world-cols p { font-size: 14.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .lc-world-globe { transition: none; }
}

/* ───────────── the field: chart, then open roles ─────────────
   The home page's sections: their data, script and looks live in js/ and css/lunartech-ai-roles.*, shared with index.html.
   Only the layout is adapted here: this page's grid in place of the home page's 9rem inset, and this page's heading size.
   The copy names no subject, so it holds for every course. */
.lc-market-head { display: flex; flex-direction: column; gap: 1.4rem; margin-bottom: clamp(2.2rem, 4vw, 3.4rem); }
/* the pulse round the "Now" dot grows about 21px past the end of the line: more than this page's 16px gutter on phones, where
   it made the whole page scrollable sideways for part of each pulse */
.lc-section.lt-trend { overflow-x: clip; }
.lc-roles-lead { grid-area: title; display: flex; flex-direction: column; gap: 1.4rem; }
.lc-main .lt-roles-title { max-width: 9em; font-size: clamp(1.7rem, 2.6vw, 2.35rem); line-height: 1.18; letter-spacing: -0.02em; text-wrap: balance; }
/* a real pause between the sections from the network's statement down to the last row of courses */
#uses + #world, #world + #field, .lc-section.lt-trend + .lt-roles-section, .lt-roles-section + #faq, #faq + #more, #more + #others, #instructor + #path, #path + #support, #support + #career, #career + #reviews { padding-top: clamp(7rem, 14vw, 13rem); }
/* silver here too: the shared chart and pills carry a peach tint on the home page */
.lc-body #lt-trend-stroke stop:first-child { stop-color: #aeb3bd; }
.lc-body #lt-trend-stroke stop:last-child { stop-color: #e6e8ec; }
.lc-body .lt-trend-mark.is-now .lt-trend-dot { border-color: var(--lc-silver); }
.lc-body .lt-trend-mark.is-now .lt-trend-dot::after { border-color: rgba(198, 202, 210, 0.6); }
.lc-body .lt-trend-legend span::before { background-image: linear-gradient(90deg, #aeb3bd, #e6e8ec); }
.lc-body .lt-trend-legend .is-dash::before { background-image: repeating-linear-gradient(90deg, #e6e8ec 0 2px, transparent 2px 6px); }
.lc-body .lt-trend-tip-name { color: var(--lc-silver); }
.lc-body .lt-pill.is-senior { background-image: linear-gradient(90deg, #eceef1, #c6cad2); }
/* the same columns as .lc-split, so the table starts where the course outline does */
@media (min-width: 1280px) { .lc-body .lt-roles { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(2rem, 5vw, 5rem); } }
@media (max-width: 1279px) { .lc-main .lt-roles-title { max-width: none; } }

/* ───────────── instructor ───────────── */
.lc-instructor { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: clamp(1.6rem, 3.5vw, 3.5rem); align-items: center; padding: 14px; border-radius: 32px; }
.lc-instructor-photo { position: relative; overflow: hidden; border-radius: 22px; aspect-ratio: 1; background: #101010; }
.lc-instructor-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lc-instructor-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 40%); pointer-events: none; }
.lc-instructor-body { padding: 1rem 1.6rem 1rem 0; }
.lc-instructor-role { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--lc-faint); }
.lc-main h3.lc-name { margin-top: 0.9rem; font-size: clamp(1.5rem, 2.2vw, 1.9rem); font-weight: 300; letter-spacing: -0.02em; color: #fff; }
.lc-instructor-body .lc-p { margin-top: 1.1rem; font-size: 14.5px; max-width: 36rem; }
.lc-instructor-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1.6rem; }
/* The instructor's profiles: real links beside the name on the card, each the platform's own mark. A person icon in the banner's row
   opens the same links in one small popup, moved to the end of the page by js so no glass card clips it or stops it blurring. */
.lc-social-btn { display: none; }
.lc-js .lc-social-btn { display: inline-grid; place-items: center; flex: none; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; transition: color 0.25s, background-color 0.25s, box-shadow 0.25s; }
.lc-social-btn--fact { width: 26px; height: 26px; margin: -5.5px; color: #c6cad2; } /* the 15px icon keeps its place, with a bigger target */
.lc-fact .lc-social-btn svg { color: inherit; }
.lc-social-btn:hover, .lc-social-btn[aria-expanded="true"] { color: #fff; background-color: rgba(255, 255, 255, 0.07); }
.lc-social-btn:focus-visible, .lc-social-name:focus-visible, .lc-main a.lc-social-link:focus-visible { outline: 1px solid rgba(255, 255, 255, 0.5); outline-offset: 2px; }
.lc-social-name { padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: right; }
.lc-js .lc-social-name { cursor: pointer; transition: box-shadow 0.25s; }
.lc-js .lc-social-name:hover, .lc-js .lc-social-name[aria-expanded="true"] { box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.4); }
/* the row carries the space above the name: left on the heading, it would push the links above the name's middle */
.lc-name-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 0.9rem; }
.lc-main .lc-name-row h3.lc-name { margin: 0; }
.lc-social-links { display: flex; align-items: center; gap: 6px; }
.lc-main a.lc-social-link { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: rgba(255, 255, 255, 0.66); text-decoration: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.13); transition: color 0.25s, background-color 0.25s, box-shadow 0.25s; }
.lc-main a.lc-social-link:hover { color: #fff; background-color: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.34); }
.lc-social-link svg { display: block; width: 14px; height: 14px; }
.lc-social-pop { display: none; } /* without a script the card's links do this job */
.lc-social-pop a { display: flex; align-items: center; gap: 10px; font-family: 'Geist', sans-serif; font-size: 13px; font-weight: 300; line-height: 1.2; color: rgba(255, 255, 255, 0.82); text-decoration: none; transition: color 0.2s, background-color 0.2s; }
.lc-social-pop a svg { flex: none; width: 14px; height: 14px; }
.lc-social-pop a .lc-social-out { display: none; }
.lc-js .lc-social-pop { position: fixed; z-index: 9990; display: block; width: 212px; margin: 0; padding: 6px; box-sizing: border-box; border-radius: 16px; background: rgba(9, 9, 11, 0.82); -webkit-backdrop-filter: blur(22px) saturate(115%) brightness(0.6); backdrop-filter: blur(22px) saturate(115%) brightness(0.6); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 18px 50px -12px rgba(0, 0, 0, 0.85); opacity: 0; visibility: hidden; transition: opacity 0.18s ease, visibility 0s linear 0.18s; }
.lc-js .lc-social-pop.is-open { opacity: 1; visibility: visible; transition: opacity 0.18s ease; }
.lc-js .lc-social-who { display: block; padding: 8px 10px 8px; font-family: 'Geist', sans-serif; font-size: 11px; font-weight: 400; letter-spacing: 0.14em; line-height: 1.2; text-transform: uppercase; color: rgba(255, 255, 255, 0.42); white-space: nowrap; }
.lc-js .lc-social-pop a { padding: 10px; border-radius: 10px; }
.lc-js .lc-social-pop a:hover, .lc-js .lc-social-pop a:focus-visible { outline: 0; color: #fff; background-color: rgba(255, 255, 255, 0.07); }
.lc-js .lc-social-pop a .lc-social-out { display: block; width: 12px; height: 12px; margin-left: auto; opacity: 0.45; }
@media (prefers-reduced-motion: reduce) { .lc-js .lc-social-pop, .lc-js .lc-social-pop.is-open { transition: none; } }

@media (max-width: 767px) {
  .lc-instructor { grid-template-columns: minmax(0, 1fr); }
  .lc-instructor-photo { aspect-ratio: 4 / 3.2; }
  .lc-instructor-photo img { object-position: 50% 22%; }
  .lc-instructor-body { padding: 0.4rem 0.8rem 1rem; }
}

/* ───────────── how you get there, support, career ─────────────
   Three sections above Reviews, on the user's reference layouts: three tall cards with a diagram at the foot, a staggered bento, and
   five columns on hairlines. Dark glass and silver, no people: the diagrams are the course's own mathematics, and every claim is from
   LUNARTECH's own pages. The cards in "how you get there" and the hours are this course's; the rest holds for any course. */
.lc-stack-head { display: flex; flex-direction: column; gap: 1.4rem; margin-bottom: clamp(2.4rem, 4vw, 3.6rem); }

.lc-path { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.lc-path-card { display: flex; flex-direction: column; justify-content: space-between; gap: 2.2rem; padding: 1.9rem 1.9rem 1.7rem; border-radius: 26px; overflow: hidden; }
.lc-path-title { font-size: clamp(1.2rem, 1.6vw, 1.45rem); font-weight: 300; line-height: 1.3; letter-spacing: -0.012em; color: #fff; }
.lc-path-copy .lc-p { margin-top: 0.75rem; font-size: 14.5px; line-height: 1.7; }
.lc-path-vis svg { display: block; width: 100%; max-width: 460px; height: auto; margin: 0 auto; overflow: visible; }
/* a certification's modules: a route with one stop for each, no words */
.lcs-route { fill: none; stroke: rgba(255, 255, 255, 0.22); vector-effect: non-scaling-stroke; }
.lcs-stop { fill: #08080b; stroke: rgba(255, 255, 255, 0.5); vector-effect: non-scaling-stroke; }
.lcs-stop.is-on { fill: #fff; stroke: none; }
.lcs-panel rect { fill: #08080b; stroke: rgba(255, 255, 255, 0.13); }
.lcs-panel.is-on rect { stroke: rgba(255, 255, 255, 0.5); }
.lcs-label { font-family: 'Geist', 'Inter', sans-serif; font-size: 12.5px; font-weight: 300; fill: rgba(255, 255, 255, 0.46); }
.lcs-label.is-on, .lcs-panel.is-on .lcs-label { fill: rgba(255, 255, 255, 0.82); }
.lcs-num { font-family: 'Geist', 'Inter', sans-serif; font-size: 16px; font-weight: 300; fill: rgba(255, 255, 255, 0.6); }
.lcs-num.is-long { font-size: 13px; }
.lcs-panel.is-on .lcs-num { fill: #fff; }
.lcs-br { fill: none; stroke: rgba(255, 255, 255, 0.34); }
.lcs-rule { fill: none; stroke: rgba(255, 255, 255, 0.16); }
.lcs-panel.is-on .lcs-br { stroke: rgba(255, 255, 255, 0.72); }
.lcs-panel.is-on .lcs-rule { stroke: rgba(255, 255, 255, 0.34); }
.lcs-grid { fill: none; stroke: rgba(255, 255, 255, 0.05); }
.lcs-a { fill: none; stroke: rgba(255, 255, 255, 0.42); stroke-width: 1.3; }
.lcs-a-h { fill: rgba(255, 255, 255, 0.42); }
.lcs-b { fill: none; stroke: rgba(255, 255, 255, 0.82); stroke-width: 1.3; }
.lcs-b-h { fill: rgba(255, 255, 255, 0.82); }
.lcs-perp { fill: none; stroke: rgba(255, 255, 255, 0.4); stroke-dasharray: 3 5; }
.lcs-square { fill: none; stroke: rgba(255, 255, 255, 0.4); }
.lcs-proj { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; }
.lcs-dot { fill: #fff; }
.lcs-bar { fill: rgba(255, 255, 255, 0.13); }
.lcs-bar.is-on { fill: rgba(255, 255, 255, 0.86); }
.lcs-axis { fill: none; stroke: rgba(255, 255, 255, 0.16); }
.lcs-say { font-family: 'Geist', 'Inter', sans-serif; font-size: 15px; font-weight: 300; fill: rgba(255, 255, 255, 0.42); }
.lcs-say.is-on { fill: #fff; }

.lc-sup { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.lc-sup-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.lc-sup-card { display: flex; flex-direction: column; box-sizing: border-box; padding: 1.7rem 1.75rem 1.75rem; border-radius: 24px; overflow: hidden; }
.lc-sup-grow { flex: 1 1 auto; }
.lc-sup-stage { margin-bottom: 1.1rem; font-size: 10.5px; font-weight: 400; line-height: 1.4; letter-spacing: 0.18em; text-transform: uppercase; color: #aeb3bd; }
.lc-sup-title { font-size: clamp(1.15rem, 1.45vw, 1.32rem); font-weight: 300; line-height: 1.3; letter-spacing: -0.012em; color: #fff; }
.lc-sup-card .lc-p { margin-top: 0.7rem; font-size: 14px; line-height: 1.7; }
.lc-sup-card .lc-p a { color: #e6e8ec; box-shadow: inset 0 -1px 0 rgba(230, 232, 236, 0.4); }
.lc-sup-days { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 1.6rem; font-size: 11.5px; font-weight: 300; color: rgba(255, 255, 255, 0.5); }
.lc-sup-days i { display: block; height: 2px; margin-bottom: 0.6rem; border-radius: 2px; background: rgba(255, 255, 255, 0.82); }
.lc-sup-days span:nth-child(2) i { background: rgba(255, 255, 255, 0.5); }
.lc-sup-days span:nth-child(3) i { background: rgba(255, 255, 255, 0.24); }
.lc-sup-ask { margin-top: 1.6rem; padding: 0.95rem 1.1rem 1.05rem; border-radius: 16px 16px 16px 5px; font-size: 14px; font-weight: 300; line-height: 1.5; color: #f3f4f7; background: rgba(255, 255, 255, 0.045); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09); }
.lc-sup-ask small { display: block; margin-bottom: 0.35rem; font-size: 11.5px; color: rgba(255, 255, 255, 0.42); }
.lc-sup-big { margin-top: 1.4rem; font-size: clamp(3.4rem, 5.6vw, 5.2rem); font-weight: 200; line-height: 1; letter-spacing: -0.04em; color: #c6cad2; }
.lc-sup-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1.5rem; }
.lc-sup-chips span { padding: 8px 14px; border-radius: 9999px; font-size: 13px; font-weight: 300; line-height: 1.2; color: #f3f4f7; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.lc-sup-tile { justify-content: flex-end; min-height: 340px; }
.lc-glass > .lc-sup-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.lc-sup-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: grayscale(1) brightness(0.62); }
.lc-sup-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(3, 3, 4, 0.97) 8%, rgba(3, 3, 4, 0.72) 42%, rgba(3, 3, 4, 0) 74%); }
@media (min-width: 992px) {
  /* the third column rises beside the heading, the second sits a step lower, and all three end level */
  .lc-sup-head { max-width: calc(66.66% - 16px); }
  .lc-sup-col:nth-child(2) { margin-top: 1.75rem; }
  .lc-sup-col:nth-child(3) { margin-top: -6.5rem; }
}

.lc-career-head { max-width: 50rem; }
.lc-career { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.lc-career-title { font-size: clamp(1.08rem, 1.35vw, 1.22rem); font-weight: 300; line-height: 1.3; letter-spacing: -0.01em; color: #fff; }

/* the diagrams scale down here, so their words are set larger to stay about 10px or more on screen */
@media (min-width: 992px) and (max-width: 1279px), (max-width: 767px) {
  .lcs-label { font-size: 16px; }
  .lcs-num { font-size: 18px; }
  .lcs-num.is-long { font-size: 15px; }
  .lcs-say { font-size: 18px; }
}
@media (max-width: 1199px) {
  .lc-path-card { padding: 1.6rem 1.5rem 1.5rem; }
  .lc-sup-card { padding: 1.5rem 1.4rem; }
}
@media (max-width: 991px) {
  .lc-path { grid-template-columns: minmax(0, 1fr); }
  .lc-path-vis svg { max-width: 420px; margin: 0; }
  .lc-sup { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lc-sup-col { display: contents; }
}
@media (max-width: 639px) {
  .lc-sup { grid-template-columns: minmax(0, 1fr); }
  .lc-sup-tile { min-height: 300px; }
}

/* Career support as a climb: each column holds one more plate of dark glass than the last, so what you gain stays with you, and
   only the newest plate is lit. The tall end rises into the space beside the heading. The plates are defined once in the markup. */
@property --lc-pl-edge { syntax: '<number>'; inherits: true; initial-value: 0.2; }
@property --lc-pl-mark { syntax: '<number>'; inherits: true; initial-value: 0.26; }
.lc-career-head h2.lc-h2 em { display: block; }
.lc-career-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.lc-career-art { display: block; overflow: visible; }
.lc-pf-top, .lc-pf-side { stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.lc-pf-side { stroke: #fff; stroke-opacity: 0.07; }
.lc-pf-top { stroke-opacity: var(--lc-pl-edge); }
.lc-pf-mark { fill: none; stroke: #fff; stroke-width: 0.33; stroke-opacity: var(--lc-pl-mark); stroke-linecap: round; stroke-linejoin: round; }
.lc-pm-dot { fill: #fff; fill-opacity: var(--lc-pl-mark); stroke: none; }
.lc-pm-node { fill: #0b0b0c; }
.lc-pm-fill { fill: #fff; fill-opacity: calc(var(--lc-pl-mark) * 0.12); }
.lc-plate { --lc-pl-edge: 0.2; --lc-pl-mark: 0.26; transition: --lc-pl-edge 0.45s ease, --lc-pl-mark 0.45s ease; }
.lc-plate.is-new { --lc-pl-edge: 1; --lc-pl-mark: 0.94; }
.lc-career-guides { fill: none; stroke: #fff; stroke-opacity: 0.12; stroke-width: 1; stroke-dasharray: 1.5 4; vector-effect: non-scaling-stroke; }
.lc-career-text .lc-p { margin-top: 0.7rem; margin-bottom: 0; font-size: 14px; line-height: 1.65; color: rgba(255, 255, 255, 0.56); }
.lc-main .lc-career-course { display: block; font-size: 13px; font-weight: 300; line-height: 1.5; color: rgba(255, 255, 255, 0.74); text-wrap: balance; transition: color 0.3s; }
.lc-career-course small { display: block; margin-bottom: 0.4rem; font-size: 11.5px; letter-spacing: 0.01em; color: rgba(255, 255, 255, 0.38); }
.lc-career-course span { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.5s var(--lc-ease); }
.lc-main .lc-career-course:hover { color: #fff; }
.lc-career-course:hover span { background-size: 100% 1px; }
.lc-career-course:focus-visible { outline: 1px solid rgba(255, 255, 255, 0.5); outline-offset: 4px; border-radius: 4px; }

/* five columns on one floor, with titles and courses lined up across them */
@media (min-width: 992px) {
  .lc-career-head { position: relative; z-index: 1; max-width: min(50rem, 54%); }
  .lc-career.lc-climb { --lc-climb-gut: clamp(1rem, 1.9vw, 2rem); grid-template-rows: auto auto auto; margin-top: calc(-0.7 * (20% - var(--lc-climb-gut))); pointer-events: none; }
  .lc-climb .lc-career-col:nth-child(n) { display: grid; grid-row: span 3; grid-template-rows: subgrid; min-width: 0; padding: 0; border: 0; }
  .lc-career-art { align-self: end; width: calc(100% - var(--lc-climb-gut)); height: auto; }
  .lc-career-text { margin-top: 1.25rem; padding: 1.5rem var(--lc-climb-gut) 0 0; border-top: 1px solid rgba(255, 255, 255, 0.13); }
  .lc-main .lc-career-course { padding: 1.5rem var(--lc-climb-gut) 0 0; }
  .lc-career-col:last-child .lc-career-text, .lc-main .lc-career-col:last-child .lc-career-course { padding-right: 0; }
  /* the tall columns reach up beside the heading, so only the stack and the words take the pointer */
  .lc-career-art, .lc-career-text, .lc-career-course { pointer-events: auto; }
}
@media (min-width: 992px) and (hover: hover) {
  /* Nothing moves: an SVG plate lifted out of its box gets cut off at the box's edge. The plates beneath light up instead. */
  .lc-career-col:hover .lc-plate:not(.is-new) { --lc-pl-edge: 0.36; --lc-pl-mark: 0.56; }
}
/* They appear one at a time from the bottom, once, when the floor comes into view (js). */
@media (min-width: 992px) and (prefers-reduced-motion: no-preference) {
  .lc-js .lc-climb .lc-career-col[data-reveal] { opacity: 1; transform: none; filter: none; transition: none; }
  .lc-js .lc-climb:not(.is-set) .lc-plate { opacity: 0; }
  .lc-js .lc-climb:not(.is-set) :is(.lc-career-guides, .lc-career-text, .lc-career-course) { opacity: 0; }
  .lc-js .lc-climb.is-set .lc-plate { transition: opacity 0.8s ease calc(var(--i, 0) * 120ms + var(--p) * 110ms), --lc-pl-edge 0.45s ease, --lc-pl-mark 0.45s ease; }
  .lc-js .lc-climb.is-set .lc-career-guides { transition: opacity 0.9s ease calc(var(--i, 0) * 120ms + 300ms); }
  .lc-js .lc-climb.is-set :is(.lc-career-text, .lc-career-course) { transition: opacity 0.9s ease calc(var(--i, 0) * 70ms + 200ms), color 0.3s; }
}

/* too narrow for five columns: one row each, the stack on the left */
@media (min-width: 768px) and (max-width: 991px) {
  .lc-career.lc-climb { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  .lc-climb .lc-career-col:nth-child(n) { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr) minmax(0, 13rem); column-gap: 2rem; align-items: center; padding: 1.8rem 0; border-top: 1px solid var(--lc-hair); }
  .lc-career-art { width: 100%; height: auto; }
}

/* phones: the shared slider. Every card keeps room for the tallest stack, so the titles stay level as you swipe. */
@media (max-width: 767px) {
  .lc-climb .lc-career-col { display: flex; flex-direction: column; }
  .lc-career-art { flex: none; width: 9.5rem; height: 12.7rem; }
  .lc-career-text { margin-top: 1.2rem; }
  .lc-main .lc-career-course { margin-top: auto; padding-top: 1.4rem; }
}

/* ───────────── reviews ───────────── */
.lc-rating { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.lc-rating strong { font-size: clamp(2.4rem, 4vw, 3.2rem); font-weight: 300; letter-spacing: -0.03em; color: #fff; line-height: 1; }
.lc-rating span { font-size: 13px; color: var(--lc-faint); }
.lc-reviews-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem 3rem; margin-bottom: clamp(2.2rem, 4vw, 3.4rem); }
.lc-reviews-title { display: flex; flex-direction: column; gap: 1.4rem; }
@media (max-width: 639px) { .lc-reviews-head { flex-direction: column; align-items: flex-start; } }

/* two rows, each drifting sideways (alternating direction) at a steady pace and pausing under the pointer.
   The rows sit outside .lc-wrap so they run edge to edge; each fades out at both ends. The cards are
   glass without the blur: the row's edge mask is a backdrop root (the blur would have nothing to see) and
   re-blurring moving cards every frame is wasted work. */
.lc-rows { display: flex; flex-direction: column; gap: 16px; }
.lc-row { overflow: hidden; padding: 4px 0 14px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); }
.lc-row-track { display: flex; width: max-content; will-change: transform; animation: lc-roll var(--dur, 60s) linear infinite; }
.lc-row[data-dir='right'] .lc-row-track { animation-direction: reverse; }
.lc-row:hover .lc-row-track { animation-play-state: paused; }
.lc-row-group { display: flex; flex: none; gap: 16px; padding-right: 16px; }
@keyframes lc-roll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
.lc-quote { display: flex; flex-direction: column; justify-content: space-between; gap: 1.6rem; width: 360px; flex: none; padding: 1.6rem 1.6rem 1.45rem; border-radius: 26px; }
.lc-quote.lc-flat { -webkit-backdrop-filter: none; backdrop-filter: none; background: linear-gradient(140deg, rgba(255, 255, 255, 0.022) 0%, rgba(255, 255, 255, 0.004) 45%, rgba(255, 255, 255, 0.012) 100%), rgba(0, 0, 0, 0.82); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 10px 26px -14px rgba(0, 0, 0, 0.85); }
.lc-quote blockquote { font-size: 14.5px; font-weight: 300; line-height: 1.7; color: rgba(255, 255, 255, 0.82); }
.lc-quote figcaption { margin: 0; text-align: left; display: flex; align-items: center; gap: 12px; font-size: 13px; color: #e1e3ea; }
.lc-avatar { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; font-size: 12px; color: #fff; background: linear-gradient(135deg, rgba(198, 202, 210, 0.42), rgba(120, 124, 132, 0.42)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
.lc-quote figcaption small { display: block; margin-top: 2px; font-size: 12px; color: var(--lc-faint); }
@media (max-width: 639px) { .lc-quote { width: 300px; padding: 1.4rem 1.4rem 1.3rem; } }
/* with reduced motion the rows stop and wrap into plain, centred cards (the looped copy is hidden) */
@media (prefers-reduced-motion: reduce) {
  .lc-row { -webkit-mask-image: none; mask-image: none; }
  .lc-row-track { animation: none; width: auto; }
  .lc-row-group { flex-wrap: wrap; justify-content: center; padding: 0 24px; }
  .lc-row-group[aria-hidden='true'] { display: none; }
  .lc-quote { max-width: 100%; }
}

/* ───────────── why us ─────────────
   A bento of smoked-glass tiles in two staggered rows (5 4 3 / 3 4 5), each with one small, still diagram that shows
   what the promise means. Every word in the diagrams is course-neutral, because this section is the same on every
   course page. Monochrome hairlines, with one muted bronze point per diagram; the only motion is on hover. */
/* the head sits on the same 12 columns as the tiles, so the line on the right starts on the third tile's edge */
.lc-why-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.6rem 16px; align-items: end; margin-bottom: clamp(2.2rem, 4vw, 3.2rem); }
.lc-why-title { grid-column: span 9; display: flex; flex-direction: column; gap: 1.4rem; }
.lc-why-title .lc-h2 { max-width: 30rem; }
.lc-main .lc-why-lede { grid-column: span 3; font-size: 14.5px; line-height: 1.75; }

.lc-why { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
/* each tile spans a diagram row and a copy row of the parent grid (subgrid), so the headings in a row line up however
   many lines the descriptions under them run to */
.lc-why-tile { grid-column: span var(--span, 4); grid-row: span 2; display: grid; grid-template-rows: subgrid; row-gap: 0; overflow: hidden; border-radius: 26px; }
.lc-why-visual { grid-row: 1; display: flex; align-items: center; justify-content: center; min-height: 268px; box-sizing: border-box; padding: 30px 30px 8px; opacity: 0.8; transition: opacity 0.6s ease; }
.lc-why-tile:hover .lc-why-visual { opacity: 1; }
.lc-why-visual svg { display: block; width: 100%; height: auto; max-height: 200px; overflow: visible; }
.lc-why-copy { grid-row: 2; padding: 16px 30px 30px; }
.lc-why-copy .lc-p { margin-top: 0.65rem; font-size: 14px; line-height: 1.7; }

/* the diagrams */
.lcw-grid { fill: none; stroke: rgba(255, 255, 255, 0.05); stroke-width: 1; }
.lcw-grid-on { stroke: rgba(255, 255, 255, 0.13); }
.lcw-axis { fill: none; stroke: rgba(255, 255, 255, 0.16); stroke-width: 1; }
.lcw-dash { fill: none; stroke: rgba(255, 255, 255, 0.3); stroke-width: 1; stroke-dasharray: 3 5; }
.lcw-solid { fill: none; stroke: rgba(255, 255, 255, 0.78); stroke-width: 1.5; stroke-linecap: round; }
.lcw-tick { fill: none; stroke: #fff; stroke-width: 1; }
.lcw-dot { fill: #fff; }
.lcw-node { fill: #090909; stroke: rgba(255, 255, 255, 0.42); stroke-width: 1; }
.lcw-key { fill: var(--lc-silver); }
.lcw-halo { fill: var(--lc-silver); opacity: 0.16; }
.lcw-text { font-family: 'Geist', 'Inter', sans-serif; font-size: 11px; font-weight: 300; letter-spacing: 0.02em; fill: rgba(255, 255, 255, 0.46); }
.lcw-text-on { fill: rgba(255, 255, 255, 0.86); }
.lcw-dial-minor { fill: none; stroke: rgba(255, 255, 255, 0.26); stroke-width: 6; }
.lcw-dial-major { fill: none; stroke: rgba(255, 255, 255, 0.7); stroke-width: 10; }
.lcw-dial-track { fill: none; stroke: rgba(255, 255, 255, 0.07); stroke-width: 1; }
.lcw-arc { fill: none; stroke: rgba(255, 255, 255, 0.78); stroke-width: 2; stroke-linecap: round; }
.lcw-arc-key { stroke: var(--lc-silver); }
.lc-why-visual--dial svg { width: auto; height: 100%; max-width: 100%; max-height: 196px; aspect-ratio: 1; }

/* a certificate, drawn small: a double hairline frame, the logo, a name line and a seal */
.lc-cert { position: relative; flex: none; width: min(100%, 248px); aspect-ratio: 1.34; padding: 20px 20px 0; box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start; border-radius: 6px; background: linear-gradient(160deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.015)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.17), inset 0 0 0 5px rgba(8, 8, 8, 0.5), inset 0 0 0 6px rgba(255, 255, 255, 0.08), 0 18px 34px -18px rgba(0, 0, 0, 0.9); }
.lc-cert-logo { display: block; width: auto; height: 15px; opacity: 0.86; }
.lc-cert-kicker { margin-top: 15px; font-size: 8.5px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); white-space: nowrap; }
.lc-cert-line { display: block; width: 66%; height: 1px; margin-top: 21px; background: rgba(255, 255, 255, 0.34); }
.lc-cert-line--short { width: 42%; margin-top: 11px; background: rgba(255, 255, 255, 0.16); }
.lc-cert-seal { position: absolute; right: 17px; bottom: 17px; width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle, var(--lc-silver) 0 2.5px, transparent 3px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28), inset 0 0 0 4px rgba(8, 8, 8, 0.4), inset 0 0 0 5px rgba(198, 202, 210, 0.45); }

/* the network tile: the fibre-and-node image bleeding off the tile, fading out before the words */
.lc-glass > .lc-why-visual--mesh { position: absolute; inset: 0; z-index: 0; display: block; padding: 0; opacity: 0.44; }
.lc-why-tile:hover > .lc-why-visual--mesh { opacity: 0.6; }
.lc-why-visual--mesh img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; -webkit-mask-image: linear-gradient(to bottom, #000 26%, transparent 74%); mask-image: linear-gradient(to bottom, #000 26%, transparent 74%); }

@media (max-width: 1199px) {
  .lc-why-title, .lc-main .lc-why-lede { grid-column: span 6; }
  .lc-why-tile { grid-column: span 6; }
  .lc-why-visual { min-height: 248px; }
  /* the diagrams scale down here, so their labels are set larger to stay about 10px on screen */
  .lc-why-visual svg[viewBox^="0 0 500"] .lcw-text { font-size: 17px; }
  .lc-why-visual svg[viewBox^="0 0 400"] .lcw-text { font-size: 14px; }
}
@media (max-width: 767px) {
  .lc-why-title, .lc-main .lc-why-lede { grid-column: 1 / -1; }
  .lc-main .lc-why-lede { max-width: 26rem; }
  .lc-why-tile { grid-column: 1 / -1; }
  .lc-why-visual { min-height: 224px; padding: 26px 24px 6px; }
  /* alone in its row here, the image tile has to reserve its own diagram height */
  .lc-why-tile--mesh { grid-template-rows: 224px auto; }
  .lc-why-copy { padding: 14px 24px 26px; }
}

/* ───────────── certificate showcase ─────────────
   Presented like a machine in a black studio: the page falls away into pure black, one strip light hangs overhead, and the
   certificate stands under it as a machined black plate on a reflective floor. All the power is in the staging and the
   restraint: the sheet itself carries only logo, kind, name, course, signature and date. Monochrome, no glass, no blend modes.
   It comes up once, slowly, out of the dark (light, plate, signature; js adds is-in when 40% of it is on screen), and then
   holds perfectly still: nothing loops and nothing follows the pointer.
   --lc-sheet-w makes the sheet as wide as the content column, unless the window is too short to show all of it under the
   sticky bars (148px, plus 16px to spare): the whole sheet must stay visible at once. Everything on it is sized in em and its
   font-size is 1% of its own width, so it scales as one object; the smallest text has a floor in px.
   The signature is a plain file: replace images/lunartech/certificate/signature.svg with the real one (any transparent svg
   or png, wide rather than tall). The floor reflection is -webkit-box-reflect, so Firefox simply shows no reflection. */
.lc-diploma-sec {
  --lc-sheet-w: min(100%, max(calc((100vh - 164px) * 16 / 9), 780px));
  margin-top: clamp(3rem, 5vw, 5rem); padding: clamp(9.5rem, 15vw, 16rem) 0 clamp(8rem, 13vw, 14rem);
}
/* the header is the same as every other section's, in size and position, except that each sentence keeps its own line; only
   the gap under it grows, to clear the light */
.lc-diploma-sec .lc-why-head { margin-bottom: clamp(7rem, 10vw, 10rem); }
.lc-diploma-sec .lc-why-title .lc-h2 { max-width: none; }
.lc-diploma-sec .lc-why-title .lc-h2 em { display: block; }
.lc-diploma-sec .lc-why-lede { text-wrap: balance; } /* it otherwise leaves "one." alone on the last line */
.lc-diploma { position: relative; width: var(--lc-sheet-w); margin: 0 auto; container-type: inline-size; }

/* the strip light, and the soft fall of it in the air just above the plate */
.lc-diploma-light { position: absolute; top: -3.25rem; left: 11%; right: 11%; height: 1px; pointer-events: none; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.82) 14%, #fff 50%, rgba(255, 255, 255, 0.82) 86%, rgba(255, 255, 255, 0)); box-shadow: 0 0 10px rgba(255, 255, 255, 0.32), 0 0 36px 2px rgba(255, 255, 255, 0.1); transition: transform 1.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s linear; }
.lc-diploma-light::after { content: ''; position: absolute; top: 0; left: -14%; right: -14%; height: 15rem; background: radial-gradient(50% 100% at 50% 0, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0) 100%); }

/* the plate: light falls on its upper face, its top edge catches the strip, and the floor mirrors its lower edge */
.lc-diploma-sheet {
  position: relative; box-sizing: border-box; aspect-ratio: 16 / 9;
  display: flex; flex-direction: column; justify-content: space-between; padding: 5.4em 6em;
  font-size: 10px; font-size: 1cqw; line-height: 1.3; border-radius: 0.7em;
  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 .03 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 160px 160px,
    radial-gradient(56% 30% at 50% 0, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0) 100%),
    linear-gradient(180deg, #080808 0%, #040404 52%, #020202 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  -webkit-box-reflect: below 1px linear-gradient(transparent 76%, rgba(255, 255, 255, 0.3));
  transition: opacity 2.2s cubic-bezier(0.3, 0, 0.2, 1) 0.35s;
}
.lc-diploma-sheet::before { content: ''; position: absolute; top: 0; left: 0.7em; right: 0.7em; height: 1px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5) 28%, rgba(255, 255, 255, 0.5) 72%, rgba(255, 255, 255, 0)); }

.lc-diploma-top { display: flex; align-items: center; justify-content: space-between; gap: 2em; }
.lc-diploma-logo { display: block; width: auto; height: 2.1em; opacity: 0.78; }
.lc-diploma-kind { font-size: max(10px, 0.9em); letter-spacing: 0.28em; text-transform: uppercase; color: rgba(255, 255, 255, 0.4); white-space: nowrap; }
.lc-diploma-body { display: flex; flex-direction: column; align-items: center; text-align: center; }
.lc-diploma-name { padding-bottom: 0.06em; font-size: 7.2em; font-weight: 300; line-height: 1.1; letter-spacing: -0.036em; color: #fff; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .lc-diploma-name { background: linear-gradient(180deg, #fff 22%, #adadad 92%); -webkit-background-clip: text; background-clip: text; color: transparent; }
}
.lc-diploma-course { margin-top: 0.85em; font-size: 1.7em; font-weight: 300; line-height: 1.25; letter-spacing: -0.008em; color: rgba(255, 255, 255, 0.48); }
.lc-diploma-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 2em; }
.lc-diploma-signed { display: flex; flex-direction: column; align-items: flex-start; flex: none; width: 19em; }
.lc-diploma-sign { display: block; width: auto; height: 5.6em; max-width: 100%; margin-bottom: -0.6em; opacity: 0.8; clip-path: inset(0 0 0 0); transition: clip-path 1.9s cubic-bezier(0.45, 0.05, 0.35, 1) 1.9s; }
.lc-diploma-rule { display: block; width: 100%; height: 1px; background: rgba(255, 255, 255, 0.14); }
.lc-diploma-who { margin-top: 0.95em; font-size: max(10.5px, 0.95em); color: rgba(255, 255, 255, 0.42); white-space: nowrap; }
.lc-diploma-when { font-size: max(10.5px, 0.95em); color: rgba(255, 255, 255, 0.3); white-space: nowrap; }
/* far enough down to clear the reflection, which is 24% of the sheet's height */
.lc-diploma-note { margin-top: calc(13.5cqw + 2rem); text-align: center; font-size: 12.5px; color: rgba(255, 255, 255, 0.3); }

/* the entrance: before is-in everything waits in the dark. The contents rise with the plate as one object: fading them
   separately inside the reflected sheet pushed 126 of 450 frames past 20ms on an RTX 3090 Ti, against 1 of 712 this way. */
.lc-diploma-note { transition: opacity 1.4s ease 3.2s; }
.lc-js .lc-diploma:not(.is-in) .lc-diploma-light { opacity: 0; transform: scaleX(0); }
.lc-js .lc-diploma:not(.is-in) .lc-diploma-sheet,
.lc-js .lc-diploma:not(.is-in) .lc-diploma-note { opacity: 0; }
.lc-js .lc-diploma:not(.is-in) .lc-diploma-sign { clip-path: inset(0 100% 0 0); }

@media (max-width: 900px) { .lc-diploma-sheet { font-size: 10px; font-size: 1.14cqw; padding: 4.6em 5em; } }
/* a phone: the same sheet stood upright, so the type can stay readable */
@media (max-width: 639px) {
  .lc-diploma-sec { --lc-sheet-w: 100%; }
  .lc-diploma-light { top: -2.25rem; left: 6%; right: 6%; }
  .lc-diploma-light::after { left: -6%; right: -6%; } /* wider would push past the screen edge and scroll the page sideways */
  .lc-diploma-sheet { aspect-ratio: 4 / 5; font-size: 10px; font-size: 2.72cqw; padding: 3.4em 3.2em; }
  .lc-diploma-top { flex-direction: column; gap: 1.5em; }
  .lc-diploma-name { font-size: 5.6em; }
  .lc-diploma-course { font-size: 1.7em; }
  .lc-diploma-signed { width: 15em; }
  .lc-diploma-note { margin-top: calc(30cqw + 1.5rem); } /* the upright sheet is taller, so its reflection is too */
}
@media (prefers-reduced-motion: reduce) {
  .lc-diploma-light, .lc-diploma-sheet, .lc-diploma-note, .lc-diploma-sign { transition: none; }
  .lc-diploma-sign { clip-path: none !important; }
}

/* ───────────── FAQ ───────────── */
.lc-faq .lc-acc-btn { padding: 1.35rem 1.6rem; }
.lc-faq .lc-acc-body { padding-left: 1.6rem; }
.lc-faq .lc-acc-title { font-size: 1rem; }
.lc-faq .lc-acc-body .lc-p a { color: #dbe5ff; box-shadow: inset 0 -1px 0 rgba(219, 229, 255, 0.4); }
@media (max-width: 639px) { .lc-faq .lc-acc-btn { padding: 1.2rem 1.1rem; } .lc-faq .lc-acc-body { padding-left: 1.1rem; } }

/* ───────────── more in mathematics ───────────── */
.lc-related-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 2.4rem; }
.lc-related-link { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--lc-faint); transition: color 0.3s; }
.lc-related-link:hover { color: #fff; }
.lc-related { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.lc-rel { display: flex; flex-direction: column; padding: 10px; border-radius: 26px; transition: transform 0.7s var(--lc-ease); }
.lc-rel:hover { transform: translateY(-5px); }
.lc-rel-img { overflow: hidden; border-radius: 17px; aspect-ratio: 16 / 9; background: #0c0c0c; }
.lc-rel-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--lc-ease); }
.lc-rel:hover .lc-rel-img img { transform: scale(1.05); }
.lc-rel-body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 1.1rem 0.7rem 0.7rem; }
.lc-rel-title { font-size: 14px; font-weight: 300; line-height: 1.5; color: #eceef3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lc-rel-meta { margin-top: auto; font-size: 12px; color: var(--lc-faint); }
@media (max-width: 991px) { .lc-related { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* four cards: four across or two by two, never one left alone */
@media (max-width: 767px) { .lc-related { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lc-related-head { align-items: flex-start; flex-direction: column; gap: 1rem; } }
@media (max-width: 479px) { .lc-related { grid-template-columns: minmax(0, 1fr); } }

/* ───────────── partners and press ───────────── */
/* The home page's rolling logo strip (css/lunartech-logo-strip.css): two rows of white logos sliding left, directly under
   the section bar, so it sits closer than a normal section and spans the same column as the label above it and the
   sections below. The strip brings its own 150px of padding and a fade painted in a solid colour, which shows as dark
   boxes over this page's soft background glow, so here the painted fade is off and the rows fade through a real mask. */
.lc-logos-sec { padding-top: clamp(3.75rem, 5.5vw, 5.5rem); padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.lc-logos-sec .lc-wrap { margin-bottom: 2.2rem; }
.lc-logos-sec .lt-logos { padding: 0; background-color: transparent; }
.lc-logos-sec .lt-logos .container-default-home { max-width: 1400px; padding-left: 24px; padding-right: 24px; }
.lc-logos-sec .lt-logos .half-bg-left, .lc-logos-sec .lt-logos .half-bg-right-left-use-later { display: none; }
.lc-logos-sec .lt-logos .logo-strip-wrapper-2 { margin-top: 18px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); }
.lc-logos-sec .lt-logos .logo-strip-wrapper-2:first-child { margin-top: 0; }

/* ───────────── closing panel ───────────── */
.lc-close { padding-bottom: clamp(5rem, 9vw, 8rem); }
/* The artwork is a 1200x1200 square, so it is shown whole: full stage height, anchored right, its left edge feathered
   into the dark. (It used to be object-fit: cover in a wide strip, which cut away most of the sculpture.) The same
   picture, enlarged and blurred, runs behind it across the full width, so the glass card always has colour to refract. */
.lc-close-stage { position: relative; overflow: hidden; display: flex; align-items: center; min-height: clamp(600px, calc(100vh - 200px), 860px); padding: clamp(2rem, 5vw, 4.5rem); border-radius: 40px; background: #000; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.lc-close-haze { position: absolute; top: -12%; left: -12%; width: 124%; height: 124%; max-width: none; object-fit: cover; opacity: 0.26; filter: blur(48px); pointer-events: none; }
.lc-close-art { position: absolute; top: 0; right: 0; height: 100%; width: auto; aspect-ratio: 1 / 1; max-width: none; opacity: 0.5; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24%); mask-image: linear-gradient(90deg, transparent 0, #000 24%); }
.lc-close-stage::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.2) 40%, rgba(0, 0, 0, 0) 62%); }
.lc-close-card { position: relative; z-index: 2; width: 100%; max-width: min(900px, 76%); margin-left: clamp(0px, 11vw, 190px); padding: clamp(2.2rem, 4vw, 3.4rem) clamp(1.6rem, 4vw, 3.4rem); border-radius: 34px; text-align: left; background-color: rgba(0, 0, 0, 0.66); }
.lc-close-card .lc-label { margin-bottom: 1.5rem; }
.lc-main h2.lc-close-title { font-size: clamp(1.7rem, 3vw, 2.5rem); font-weight: 300; line-height: 1.18; letter-spacing: -0.025em; color: #fff; text-wrap: balance; }
.lc-close-card .lc-p { max-width: 40rem; margin: 1.2rem 0 0; color: rgba(255, 255, 255, 0.72); }
.lc-close-card .lc-cta-row { justify-content: flex-start; margin-top: 2.1rem; }
.lc-close-meta { margin-top: 2.3rem; padding-top: 1.4rem; border-top: 1px solid var(--lc-hair); }
@media (max-width: 1180px) { .lc-close-card { margin-left: 0; max-width: 620px; padding: 2.4rem 2.2rem; } }
/* wide screens: the card sits in the true centre of the panel, with its contents centred too */
@media (min-width: 1181px) {
  .lc-close-stage { justify-content: center; }
  .lc-close-card { margin-left: 0; text-align: center; }
  .lc-close-card .lc-p { margin-left: auto; margin-right: auto; text-wrap: balance; }
  .lc-close-card .lc-cta-row, .lc-close-meta { justify-content: center; }
  .lc-close-card .lc-label::after { content: ''; width: 24px; height: 1px; background: rgba(255, 255, 255, 0.28); } /* a rule either side, so it reads as centred */
}
/* narrow screens: the whole picture first, as a square, then the card tucked under it over the picture's faded foot */
@media (max-width: 900px) {
  .lc-close-stage { display: block; min-height: 0; padding: 82% 14px 14px; }
  .lc-close-haze { top: -6%; height: 70%; }
  .lc-close-art { top: 0; right: auto; left: 0; width: 100%; height: auto; -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent 100%); mask-image: linear-gradient(180deg, #000 58%, transparent 100%); }
  .lc-close-stage::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%, rgba(0, 0, 0, 0.7) 100%); }
  .lc-close-card { max-width: none; margin-left: 0; }
}
@media (max-width: 639px) { .lc-close-stage { border-radius: 28px; } .lc-close-card { border-radius: 26px; padding: 2.2rem 1.6rem; } .lc-close-meta { gap: 6px 18px; } .lc-close-meta i { display: none; } }

/* the footer keeps the home page's solid black: the fixed colour field would otherwise paint over it */
.lc-body .footer-section { position: relative; z-index: 1; background-color: var(--lc-bg); }
/* ...and eases into it, so the colour field doesn't end on a hard line at the footer's top edge */
.lc-body .footer-section::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 180px; pointer-events: none; background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--lc-bg)); }

/* ───────────── phone sliders ─────────────
   Up to 767px the long stacks of cards become sideways sliders, one card at a time with the next peeking in, so the page isn't a
   very long scroll. Native scrollers with snap, so a swipe needs no script; js/lunartech-course.js adds the line that shows where
   you are. They run edge to edge, through the 16px gutter. The cards skip their entrance here: they'd still be fading in as they arrive. */
.lc-slide-bar { display: none; }
@media (max-width: 767px) {
  .lc-outcomes, .lc-path, .lc-sup, .lc-career, .lc-why, .lc-net-roles, .lc-related { display: flex; flex-direction: row; /* the template makes every ul a column */ align-items: stretch; gap: 12px; margin-left: -16px; margin-right: -16px; padding: 4px 16px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0 16px; scrollbar-width: none; }
  .lc-outcomes::-webkit-scrollbar, .lc-path::-webkit-scrollbar, .lc-sup::-webkit-scrollbar, .lc-career::-webkit-scrollbar, .lc-why::-webkit-scrollbar, .lc-net-roles::-webkit-scrollbar, .lc-related::-webkit-scrollbar { display: none; }
  .lc-outcomes > *, .lc-path > *, .lc-career > *, .lc-why > *, .lc-net-roles > *, .lc-related > *, .lc-sup .lc-sup-card { flex: 0 0 min(86%, 360px); min-width: 0; box-sizing: border-box; scroll-snap-align: start; scroll-snap-stop: always; }
  .lc-js .lc-outcomes > [data-reveal], .lc-js .lc-path > [data-reveal], .lc-js .lc-career > [data-reveal], .lc-js .lc-why > [data-reveal], .lc-js .lc-related > [data-reveal], .lc-js .lc-sup .lc-sup-card[data-reveal] { opacity: 1; transform: none; filter: none; transition: none; }

  .lc-slide-bar { display: block; position: relative; height: 1px; margin-top: 16px; overflow: hidden; background-color: rgba(255, 255, 255, 0.13); }
  .lc-slide-bar i { position: absolute; top: 0; bottom: 0; left: 0; width: 20%; background-color: #e6e8ec; }
  .lc-outcomes + .lc-slide-bar { margin-top: calc(16px - 2.25rem); } /* it lands in a grid with a 2.25rem row gap */

  /* the Why tiles all share one diagram height */
  .lc-why .lc-why-tile { grid-template-rows: 224px auto; }
  /* a single glass panel holding every role becomes one card per role; the career columns become cards too */
  .lc-net-roles.lc-glass { padding: 4px 16px; border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
  .lc-net-roles.lc-glass::before, .lc-net-roles.lc-glass::after { display: none; }
  .lc-net-roles .lc-net-role, .lc-career .lc-career-col { padding: 1.5rem 1.4rem 1.6rem; border: 0; border-radius: 22px; background: linear-gradient(140deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.008) 45%, rgba(255, 255, 255, 0.02) 100%), rgba(0, 0, 0, 0.82); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
  .lc-career .lc-career-col:nth-child(n) { padding-top: 1.5rem; border-top: 0; }
}

/* ───────────── reduced motion ───────────── */
@media (prefers-reduced-motion: reduce) {
  .lc-banner-art { animation: none !important; }
  .lc-js [data-reveal] { opacity: 1; transform: none; filter: none; transition: none; }
  .lc-btn, .lc-btn svg, .lc-outcome, .lc-rel, .lc-rel-img img, .lc-acc-panel, .lc-acc-body, .lc-banner-card { transition-duration: 0.01ms !important; }
}