/* LUNARTECH RISE ACADEMY: the pricing card on index.html, written by tools/pricing/home-card.mjs and driven by js/lunartech-pricing.js.
   One card, not two halves (user, 2026-11-07: "less artificial, but more connected, darker, warmer"). Everything you can buy is one list on the left, and whichever you pick opens on the right with
   its own plans. The chosen row runs straight into that side, with no line between them. Warm black in place of grey boxes, plans as columns under a lit line, and no ticks.
   All the colours are the variables on .lt-pay. They're warm, and kept muted: see the memory glass-must-be-dark-professional. */

.lt-pricing-lede { max-width: 34rem; margin: 1.1rem auto 0; font-family: 'Geist', sans-serif; font-size: 16px; font-weight: 300; line-height: 1.6; color: #a9a196; text-align: center; }

.pricing-grid-half { column-gap: 0; row-gap: 0; }

.lt-pay {
  --pay-rail: #050403;
  --pay-side: #0c0906;
  --pay-line: rgba(255, 232, 205, 0.09);
  --pay-text: #f4eee5;
  --pay-soft: #cbc2b5;
  --pay-dim: #a39a8d;
  --pay-faint: #8a8174;
  --pay-warm: #e8cba8;
  display: grid; grid-template-columns: minmax(0, 34fr) minmax(0, 66fr); box-sizing: border-box; width: 100%; overflow: clip; border: 1px solid var(--pay-line); border-radius: 22px;
  background-color: var(--pay-rail); color: var(--pay-text); font-family: 'Geist', sans-serif; font-weight: 300; text-align: left;
}
.lt-pay :focus-visible { outline: 1px solid var(--pay-warm); outline-offset: 2px; }

/* ---------- The list ---------- */

.lt-pay-rail { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 2.2rem 0 2rem 1rem; border-right: 1px solid var(--pay-line); }
.lt-pay-group { margin: 0 0 0.45rem; padding-left: 1.1rem; font-size: 11px; font-weight: 400; line-height: 1.4; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pay-faint); }
.lt-pay-rows + .lt-pay-group { margin-top: 1.7rem; }
ul.lt-pay-rows { display: block; width: 100%; margin: 0; padding: 0; list-style: none; }
.lt-price-row { position: relative; z-index: 1; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.8rem 1.4rem 0.8rem 1.1rem; border-radius: 12px 0 0 12px; color: inherit; text-decoration: none; }
.lt-price-row-name { font-size: 14px; font-weight: 300; line-height: 1.35; color: var(--pay-soft); text-align: left; transition: color 0.25s; }
.lt-price-row-price { font-size: 12px; font-weight: 300; color: var(--pay-faint); font-variant-numeric: tabular-nums; white-space: nowrap; transition: color 0.25s; }
.lt-price-row:hover .lt-price-row-name, .lt-price-row.is-on .lt-price-row-name { color: var(--pay-text); }
.lt-price-row:hover .lt-price-row-price { color: var(--pay-soft); }
.lt-price-row.is-on .lt-price-row-price { color: var(--pay-warm); }

/* The chosen row: the right side's own colour reaching across the line between them, over the border, travelling from row to row. */
.lt-pay-glide { position: absolute; top: 0; right: -1px; left: 1rem; display: none; box-sizing: border-box; border: 1px solid var(--pay-line); border-right: 0; border-radius: 12px 0 0 12px; background-color: var(--pay-side); pointer-events: none; }
.lt-pay.is-live .lt-pay-glide { display: block; }
.lt-pay.is-gliding .lt-pay-glide { transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), height 0.5s cubic-bezier(0.22, 1, 0.36, 1); }

.lt-pay-all { display: inline-flex; align-items: center; gap: 0.5rem; align-self: flex-start; margin-top: auto; margin-left: 1.1rem; padding-top: 1.6rem; font-size: 13.5px; font-weight: 300; color: var(--pay-dim); text-decoration: none; transition: color 0.25s; }
.lt-pay-all:hover { color: var(--pay-text); }

/* ---------- The chosen item. Every side shares one grid cell, so the card keeps the height of the tallest and nothing below it jumps ---------- */

.lt-pay-panes { display: grid; min-width: 0; container-type: inline-size; background: radial-gradient(85% 60% at 80% -8%, rgba(190, 132, 78, 0.1), rgba(190, 132, 78, 0) 72%), var(--pay-side); }
.lt-pay-pane { grid-area: 1 / 1; display: flex; flex-direction: column; min-width: 0; padding: 2.2rem 2.4rem; visibility: hidden; opacity: 0; transform: translate3d(0, 6px, 0); transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s; }
.lt-pay-pane.is-on { visibility: visible; opacity: 1; transform: none; transition: opacity 0.45s ease 0.08s, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.08s, visibility 0s; }
.lt-pay-kind { margin: 0 0 0.9rem; font-size: 11px; font-weight: 400; line-height: 1.4; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pay-faint); }
.lt-pay .lt-pay-title { margin: 0 0 1.5rem; font-family: 'Inter', sans-serif; font-size: clamp(1.6rem, 2vw, 2.4rem); font-weight: 300; line-height: 1.16; letter-spacing: -0.01em; text-align: left; text-transform: none; color: var(--pay-text); }
.lt-pay-title span { color: rgba(244, 238, 229, 0.42); }

/* ---------- Plans: columns on one line, with a light falling on the chosen one. The negative margin keeps their words on the same left edge as the title ---------- */

.lt-plans { box-sizing: border-box; margin: 0 -1rem; border-top: 1px solid var(--pay-line); border-bottom: 1px solid var(--pay-line); text-align: left; }
.lt-plan-options { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.lt-plan-option { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 1rem 1rem 1.1rem; border: 0; border-left: 1px solid var(--pay-line); border-radius: 0; background: transparent; color: var(--pay-dim); font-family: 'Geist', sans-serif; font-weight: 300; text-align: left; cursor: pointer; transition: color 0.3s; }
.lt-plan-option:first-of-type { border-left: 0; }
.lt-plan-option:hover { color: var(--pay-soft); }
.lt-plan-option[aria-pressed="true"] { color: var(--pay-text); box-shadow: inset 0 1px 0 var(--pay-warm); background-image: linear-gradient(180deg, rgba(214, 165, 116, 0.12), rgba(214, 165, 116, 0) 82%); }
.lt-plan-option:focus-visible { outline-offset: -3px; }

/* With the script, one light travels between the plans, in place of each plan lighting its own. */
.lt-plan-glide { position: absolute; top: -1px; left: 0; display: none; box-sizing: border-box; border-top: 1px solid var(--pay-warm); background-image: linear-gradient(180deg, rgba(214, 165, 116, 0.12), rgba(214, 165, 116, 0) 82%); pointer-events: none; }
.lt-plans.is-live .lt-plan-glide { display: block; }
.lt-plans.is-live .lt-plan-option[aria-pressed="true"] { background-image: none; box-shadow: none; }
.lt-plans.is-gliding .lt-plan-glide { transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), width 0.45s cubic-bezier(0.22, 1, 0.36, 1), height 0.45s cubic-bezier(0.22, 1, 0.36, 1); }

.lt-plan-name { font-size: 13px; font-weight: 400; line-height: 1.3; }
.lt-plan-amount { margin-top: 0.6rem; font-family: 'Inter', sans-serif; font-size: clamp(1.3rem, 1.7vw, 1.75rem); font-weight: 300; line-height: 1.1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lt-plan-per { margin-top: 0.2rem; font-size: 12.5px; line-height: 1.35; color: var(--pay-faint); }
/* A bootcamp's five plans (one payment, then 3, 6, 12 or 24) share the width three or four had, so "$3,332.33" needs a little less size to stay in its column. */
.lt-plan-options:has(> .lt-plan-option:nth-of-type(5)) .lt-plan-amount { font-size: clamp(1.2rem, 1.5vw, 1.6rem); }
.lt-plan-aside { margin-top: 0.6rem; font-size: 12px; line-height: 1.4; color: var(--pay-faint); }
.lt-plan-option[aria-pressed="true"] .lt-plan-per, .lt-plan-option[aria-pressed="true"] .lt-plan-aside { color: var(--pay-dim); }

/* What the chosen plan means, under the plans, so the choice and its result read together. */
.lt-plan-then { margin: 0; padding: 0.85rem 1rem 0.9rem; border-top: 1px solid var(--pay-line); font-size: 13.5px; font-weight: 300; line-height: 1.5; color: var(--pay-dim); }
.lt-plan-then-amount { white-space: nowrap; color: var(--pay-text); }

/* ---------- What it includes, or what it covers ---------- */

.lt-plan-label { margin: 1.5rem 0 0.75rem; font-size: 13px; font-weight: 300; line-height: 1.3; color: var(--pay-faint); text-align: left; }
ul.lt-plan-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem 1.5rem; width: 100%; margin: 0; padding: 0; list-style: none; }
.lt-plan-list li { font-size: 14px; font-weight: 300; line-height: 1.4; color: var(--pay-soft); text-align: left; }
.lt-pay-blurb { max-width: 36rem; margin: 0; font-size: 14px; font-weight: 300; line-height: 1.6; color: var(--pay-soft); text-wrap: pretty; }
ul.lt-pay-stats { display: flex; flex-flow: row wrap; gap: 0.5rem 2rem; width: 100%; margin: 1rem 0 0; padding: 0; list-style: none; }
.lt-pay-stats li { display: inline-flex; align-items: baseline; gap: 0.45rem; }
.lt-pay-stats b { font-family: 'Inter', sans-serif; font-size: 1.05rem; font-weight: 300; letter-spacing: -0.01em; color: var(--pay-text); }
.lt-pay-stats span { font-size: 12px; line-height: 1.4; color: var(--pay-faint); }

/* ---------- The way in: the site's button as a warm pill, in place of Origin's uppercase box and separate arrow ---------- */

.lt-plan-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.4rem; width: 100%; margin-top: auto; padding-top: 1.75rem; }
.lt-pay .button-with-icon { position: static; padding-right: 0.45rem; border-radius: 999px; background-color: #efe7da; color: #0a0806; text-shadow: 0 1.1rem 0 #0a0806; text-transform: none; transition: background-color 0.25s; }
.lt-pay .button-with-icon:hover { background-color: #f8f0e4; }
.lt-pay .button-with-icon:focus-visible { outline: 1px solid var(--pay-warm); outline-offset: 3px; }
.lt-pay .button-flex, .lt-pay .button-with-icon:hover .button-flex { box-sizing: border-box; min-height: 46px; height: 46px; padding: 0 0.35rem 0 1.4rem; border: 0; background-color: transparent; text-transform: none; }
.lt-pay .button-text { font-family: 'Geist', sans-serif; font-size: 14px; font-weight: 400; }
.lt-pay .button-arrow-wrapper { min-width: 2rem; max-width: 2rem; min-height: 2rem; max-height: 2rem; background-color: transparent; }
.lt-plan-compare { font-size: 13.5px; font-weight: 300; color: var(--pay-dim); text-decoration: none; transition: color 0.25s; }
.lt-plan-compare:hover { color: var(--pay-text); }

/* ---------- Side by side: the card stops growing before it feels stretched. Origin's 13.5rem side margins leave a laptop's card too narrow for a bootcamp's four plans across, so these widths take less margin ---------- */

@media (min-width: 992px) {
  .pricing-grid-half { max-width: 1240px; margin-left: auto; margin-right: auto; }
}
@media (min-width: 992px) and (max-width: 1599px) {
  .container.padding-13-5rem:has(> .pricing-grid-half) { padding-left: 3rem; padding-right: 3rem; }
  .pricing-grid-half { max-width: 1100px; }
}

/* ---------- Stacked: the list above, the chosen item below ---------- */

@media (max-width: 991px) {
  .pricing-grid-half { width: min(38rem, 100%); }
  .lt-pay { grid-template-columns: minmax(0, 1fr); }
  .lt-pay-rail { padding: 1.75rem 1rem 1.5rem; border-right: 0; border-bottom: 1px solid var(--pay-line); }
  .lt-price-row { padding-right: 1.1rem; border-radius: 12px; }
  .lt-pay-glide { right: 1rem; border-right: 1px solid var(--pay-line); border-radius: 12px; }
  .lt-pay-pane { padding: 1.75rem 2rem 2rem; }
  .lt-pay .lt-pay-title { font-size: 1.9rem; }
  .lt-pay .button-with-icon { right: auto; }
}
@media (max-width: 559px) {
  .lt-pay-pane { padding: 1.75rem 1.25rem 2rem; }
}

/* ---------- Too narrow for columns, whatever the screen: the plans become rows ---------- */

@container (max-width: 640px) {
  .lt-plan-options { grid-auto-flow: row; }
  .lt-plan-option { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; align-items: baseline; padding: 0.8rem 1rem; border-top: 1px solid var(--pay-line); border-left: 0; }
  .lt-plan-option:first-of-type { border-top: 0; }
  .lt-plan-name { grid-area: 1 / 1; font-size: 14px; }
  .lt-plan-aside { grid-area: 2 / 1; margin-top: 0.25rem; }
  .lt-plan-amount { grid-area: 1 / 2; margin-top: 0; font-size: 1.35rem; text-align: right; }
  .lt-plan-per { grid-area: 2 / 2; margin-top: 0.25rem; text-align: right; }
}
@container (max-width: 400px) {
  ul.lt-plan-list { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- On a course or certification page: only the plans, what they include and the way in, under the page's own heading. The plans run edge to edge, with the light along the card's top ---------- */

.lt-pay--page { --pay-pad: 2.2rem; grid-template-columns: minmax(0, 1fr); }
.lt-pay--page .lt-pay-pane { padding: 0 var(--pay-pad) 2.2rem; }
.lt-pay--page .lt-plans { margin: 0 calc(var(--pay-pad) * -1); border-top: 0; }
.lt-pay--page .lt-plan-glide { top: 0; }
.lt-pay--page .lt-plan-option { padding-left: var(--pay-pad); }
.lt-pay--page .lt-plan-then { padding-right: var(--pay-pad); padding-left: var(--pay-pad); }
@container (max-width: 640px) {
  .lt-pay--page .lt-plan-option { padding-right: var(--pay-pad); }
}
@media (max-width: 559px) {
  .lt-pay--page { --pay-pad: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .lt-price-row-name, .lt-price-row-price, .lt-pay.is-gliding .lt-pay-glide, .lt-pay-all, .lt-pay-pane, .lt-pay-pane.is-on, .lt-plan-option, .lt-plans.is-gliding .lt-plan-glide, .lt-pay .button-with-icon, .lt-plan-compare { transition: none; }
  .lt-pay-pane { transform: none; }
}