/* The Free Trial page, on top of lunartech-pricing-pages.css. The same black, type and buttons as the other pricing pages, with room to tell a story:
   a welcome, then three days told through the light changing, real learners, and the plain terms. The one thing that moves is the picture beside the days, which fades as you read. */

/* Titles in two tones, the home page's way: what we're saying, then the quieter half of it */
.ft-two span { display: block; color: rgba(255, 255, 255, 0.42); text-wrap: balance; }

/* ---------- The welcome ---------- */

.ft-open { min-height: min(calc(100vh - 190px), 680px); }
.ft-open-words { display: flex; flex-direction: column; justify-content: center; }
.ft-open .pp-lede { max-width: 30rem; margin-top: 1.4rem; line-height: 1.65; }
.ft-open .pp-actions { margin-top: 2.2rem; }

.ft-crumbs { display: flex; align-items: center; gap: 10px; margin: 0 0 1.5rem; font-family: Geist, sans-serif; font-size: 13px; font-weight: 300; line-height: 1.3; color: #fff; }
.ft-crumbs a { color: #fff; text-decoration: none; }
.ft-crumbs a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.ft-crumbs span[aria-hidden] { color: rgba(255, 255, 255, 0.42); }

/* ---------- The three days ---------- */

.ft-days { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(3rem, 6vw, 6rem); margin-top: clamp(2.5rem, 4vw, 3.5rem); }
.ft-stage { position: sticky; top: 120px; align-self: start; height: min(calc(100vh - 160px), 640px); border-radius: 16px; overflow: hidden; background: #000; }
.ft-stage img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.9s ease !important; }
.ft-stage img.is-on { opacity: 1; }

.ft-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.ft-day { display: flex; flex-direction: column; justify-content: center; min-height: min(calc(100vh - 160px), 640px); margin: 0; padding: 0; }
.ft-day-art { display: none; }
.ft-when { margin: 0 0 1rem; font-family: Geist, sans-serif; font-size: 13px; font-weight: 300; line-height: 1.3; color: #fff; }
/* .lt-paths-title */
.ft-day-title { margin: 0; font-family: Inter, sans-serif; font-size: 2.2vw; font-weight: 300; line-height: 1.14; letter-spacing: -0.01em; text-transform: none; color: #fff; }
.ft-day-text { max-width: 30rem; margin: 1.1rem 0 0; font-family: Geist, sans-serif; font-size: 16px; font-weight: 300; line-height: 1.7; color: #fff; text-wrap: pretty; }
.ft-day-text a { color: #fff; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.ft-day-text a:hover { color: #fff; text-decoration-thickness: 2px; }

/* ---------- Learners ---------- */

.ft-voices { margin-top: clamp(2.5rem, 4vw, 3.5rem); }
.ft-voice { margin: 0; }
.ft-voice blockquote { margin: 0; padding: 0; border: 0; font-family: Geist, sans-serif; font-size: 16px; font-weight: 300; line-height: 1.65; color: #fff; text-wrap: pretty; }
.ft-voice figcaption { margin-top: 1rem; font-family: Geist, sans-serif; font-size: 13px; font-weight: 300; line-height: 1.5; text-align: left; color: #fff; }
.ft-voice figcaption b { display: block; font-weight: 400; }

/* ---------- The terms and the ending ---------- */

.ft-after { margin-top: clamp(3.5rem, 6vw, 5.5rem); }

.ft-close { display: flex; flex-direction: column; align-items: center; text-align: center; margin-top: clamp(6rem, 11vw, 10rem); }
.ft-close-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 1.6rem; margin-top: 2.2rem; }

/* ---------- Smaller screens: each day carries its own picture, and nothing stays pinned ---------- */

@media (max-width: 991px) {
  .ft-open { min-height: 0; }
  .ft-open .pp-art { min-height: 0; aspect-ratio: 4 / 3; }
  .ft-days { grid-template-columns: minmax(0, 1fr); }
  .ft-stage { display: none; }
  .ft-list { gap: clamp(3rem, 8vw, 4.5rem); }
  .ft-day { display: block; min-height: 0; }
  .ft-day-art { display: block; margin: 0 0 1.5rem; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; }
  .ft-day-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .ft-day-title { font-size: clamp(1.5rem, 4.4vw, 2.2rem); }
}
@media (max-width: 479px) {
  .ft-open .pp-art { aspect-ratio: 1 / 1; }
  .ft-day-art { aspect-ratio: 4 / 3; }
}
@media (prefers-reduced-motion: reduce) {
  .ft-stage img { transition: none !important; }
}