/*
 * LastLonger home page (front-page.php): hero, problem, benefits, timeline, content, comparison,
 * mechanism, author, FAQ and final CTA. Values from frontend-spec 4.5, 4.6, 4.7 and 5.1.1-5.1.10.
 * Deviations only as listed in theme-architecture 5.6: #1 containers, #2 hero entrance as a keyframe,
 * #3 FAQ open without JS, #9 anchor scroll margin, #17 phone first screen of the hero (theme 1.2.1).
 * One addition for a state the original never shows: .ll-final__price--solo (no previous price set, see the
 * omnibus rule of theme-architecture 3.2).
 * Shared primitives live elsewhere: .ll-h2, .ll-h3, .ll-lead, .ll-muted, .ll-eyebrow, .ll-accent and the
 * keyframes in base.css; sections, containers and the generic .ll-reveal states in layout.css; .ll-btn in components.css.
 * Every hidden reveal state is gated by html.ll-motion (set by the inline bootstrap only when reveal.js can run).
 */

/* Anchors (theme 5.6 #9): the fixed 64px header would otherwise cover the target top. */
#content, #price { scroll-margin-top: 4rem; }

/* ---------- Hero (frontend-spec 5.1.1) ----------
   Phones (below 640 px, theme 1.2.1, theme 5.6 #17): no full-height centring, a 1rem top padding, .75rem gaps, a
   smaller badge and lead, so a 390x700 screen shows the headline, the price, the whole button and the format line
   above the open consent banner. From 640 px every value is the spec's. */
.ll-hero { position: relative; display: flex; align-items: center; overflow: hidden;
  background-color: #fff; padding-top: 4rem; }                 /* 64px = header height */
@media (min-width: 640px) { .ll-hero { min-height: 100vh; } }  /* min-height includes the header */
.ll-hero__bg { position: absolute; inset: 0;
  background-image: linear-gradient(to bottom, rgba(244,246,249,.6), #fff, #fff); }   /* stops at 0%, 50%, 100% */
.ll-hero__halo { position: absolute; top: -8rem; right: -8rem; width: 36rem; height: 36rem; border-radius: 9999px;
  background-color: rgba(230,241,235,.6); filter: blur(64px); pointer-events: none; }
/* Width, centring and gutters come from .ll-container.ll-container--wide (theme 5.4). The mount fade/slide is a
   keyframe instead of a JS-toggled transition (theme 5.6 #2), switched off under reduced motion (O15). */
.ll-hero__content { position: relative; z-index: 10; width: 100%; padding-top: 1rem; padding-bottom: 4rem;
  animation: llHeroIn 1000ms var(--ll-ease) both; }
@media (min-width: 640px) { .ll-hero__content { padding-top: 4rem; } }
@media (prefers-reduced-motion: reduce) { .ll-hero__content { animation: none; } }
.ll-hero__grid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 1024px) { .ll-hero__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem; } }
.ll-hero__left > * + * { margin-top: .75rem; }
@media (min-width: 640px) { .ll-hero__left > * + * { margin-top: 1.75rem; } }
.ll-badge { display: inline-flex; align-items: center; gap: .5rem; background-color: var(--ll-accent-soft);
  color: var(--ll-accent); padding: .25rem .75rem; border-radius: 9999px; font-size: .8125rem; line-height: 1.25rem; font-weight: 600; }
@media (min-width: 640px) { .ll-badge { padding: .375rem 1rem; font-size: .875rem; } }
.ll-badge__dot { width: .5rem; height: .5rem; border-radius: 9999px; background-color: var(--ll-accent); }
.ll-hero__title { font-family: var(--ll-font-display); letter-spacing: -0.02em; font-size: 2.25rem; line-height: 1.08;
  font-weight: 600; color: var(--ll-ink); }
/* Below 390 px (360-375 px Android phones) „Kończysz za szybko?” stays on one line and the gaps are a little tighter,
   so the button clears the banner. */
@media (max-width: 389.98px) {
  .ll-hero__title { font-size: 2rem; }
  .ll-hero__content { padding-top: .5rem; }
  .ll-hero__left > * + * { margin-top: .625rem; }
}
@media (min-width: 640px)  { .ll-hero__title { font-size: 3rem; line-height: 1; } }
@media (min-width: 1024px) { .ll-hero__title { font-size: 3.75rem; line-height: 1; } }
.ll-hero__title span { display: block; color: var(--ll-accent); margin-top: .5rem; }
.ll-hero__lead { font-size: .9375rem; line-height: 1.5; color: var(--ll-ink-muted); max-width: 36rem; }
@media (min-width: 640px) { .ll-hero__lead { font-size: 1.125rem; line-height: 1.625; } }
.ll-hero__price > * + * { margin-top: .375rem; }
.ll-hero__price-row { display: flex; flex-wrap: wrap; align-items: center; column-gap: 1rem; row-gap: .5rem; }
.ll-hero__price-pair { display: flex; align-items: baseline; gap: .5rem; }
.ll-hero__now { font-family: var(--ll-font-display); letter-spacing: -0.02em; font-size: 3rem; line-height: 1;
  font-weight: 600; color: var(--ll-ink); }
.ll-hero__was { color: var(--ll-ink-muted); text-decoration-line: line-through; font-size: 1.125rem; line-height: 1.75rem; }
.ll-hero__guarantee { display: inline-flex; align-items: center; gap: .375rem; font-size: .875rem; line-height: 1.25rem;
  color: var(--ll-accent); font-weight: 500; }
.ll-hero__guarantee svg { width: 1rem; height: 1rem; }
.ll-hero__omnibus { font-size: .75rem; line-height: 1rem; color: var(--ll-ink-muted); }
.ll-hero__cta > * + * { margin-top: .5rem; }
@media (min-width: 640px) { .ll-hero__cta > * + * { margin-top: .75rem; } }
.ll-hero__note { font-size: .875rem; line-height: 1.25rem; color: var(--ll-ink-muted); display: flex; align-items: center; gap: .375rem; }
.ll-hero__note svg { width: .875rem; height: .875rem; color: var(--ll-accent); flex-shrink: 0; }
.ll-hero__note span span { white-space: nowrap; }   /* on two lines it breaks after the format, never "po / płatności" */
.ll-hero__right { position: relative; }
.ll-hero__float { position: relative; animation: llFloatSoft 7s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .ll-hero__float { animation: none; } }
.ll-halo { position: absolute; inset: 1.5rem; background-color: rgba(31,111,80,.1); border-radius: 2rem;
  filter: blur(40px); pointer-events: none; }
.ll-hero__img { position: relative; z-index: 10; width: 100%; height: auto; filter: drop-shadow(0 25px 25px rgba(0,0,0,.15)); }

/* ---------- Problem "To o Tobie, jeśli:" (frontend-spec 5.1.2) ---------- */
.ll-problem h2 { text-align: center; margin-bottom: 2.5rem; }                 /* colour inherited: #fff */
.ll-problem__grid { display: grid; gap: 1rem; }
@media (min-width: 640px) { .ll-problem__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ll-problem__card { display: flex; align-items: flex-start; gap: .75rem; padding: 1.25rem; border-radius: 1rem;
  border: 1px solid rgba(255,255,255,.1); background-color: rgba(255,255,255,.04); transition: all 500ms var(--ll-ease); }
.ll-problem__card svg { width: 1.25rem; height: 1.25rem; color: var(--ll-accent); flex-shrink: 0; margin-top: .125rem; }
.ll-problem__card span { color: var(--ll-paper-muted); line-height: 1.625; }
.ll-motion .ll-revealroot:not(.is-visible) .ll-problem__card { opacity: 0; transform: translateY(.75rem); }
.ll-problem__closing { text-align: center; font-size: 1.125rem; line-height: 1.75rem; color: #fff; margin-top: 2.25rem; }

/* ---------- Benefits "Co zyskasz dzięki programowi" (frontend-spec 5.1.3) ---------- */
.ll-benefits__head { text-align: center; margin-bottom: 3rem; }   /* also .ll-reveal: 700ms, hidden = opacity 0 + translateY(1rem) */
.ll-benefits__head h2 { color: var(--ll-ink); }
.ll-benefits__grid { display: grid; gap: 1rem; margin-bottom: 3rem; }
@media (min-width: 640px) { .ll-benefits__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ll-benefit { display: flex; align-items: flex-start; gap: 1rem; padding: 1.5rem; border-radius: 1rem;
  background-color: var(--ll-paper-2); border: 1px solid rgba(15,27,46,.05); transition: all 500ms var(--ll-ease); }
.ll-benefit__icon { flex-shrink: 0; width: 2rem; height: 2rem; border-radius: 9999px; background-color: var(--ll-accent);
  display: flex; align-items: center; justify-content: center; margin-top: .125rem; }
.ll-benefit__icon svg { width: 1rem; height: 1rem; color: #fff; }
.ll-benefit p { color: var(--ll-ink); line-height: 1.625; }
.ll-motion .ll-revealroot:not(.is-visible) .ll-benefit { opacity: 0; transform: translateY(.75rem); }
.ll-benefits__foot { text-align: center; }
.ll-benefits__foot > * + * { margin-top: 1.25rem; }
.ll-benefits__tagline { font-family: var(--ll-font-display); letter-spacing: -0.02em; font-size: 1.25rem; line-height: 1.75rem;
  color: var(--ll-ink-muted); font-style: italic; }       /* weight 400 requested -> PJS 500 rendered, faux-italic */

/* ---------- Timeline (frontend-spec 4.5, 5.1.4) ---------- */
.ll-timeline__head { text-align: center; margin-bottom: 3rem; }
@media (min-width: 768px) { .ll-timeline__head { margin-bottom: 4rem; } }
.ll-timeline__track { position: relative; }
.ll-timeline__hline { display: none; }
@media (min-width: 768px) { .ll-timeline__hline { display: block; position: absolute; top: 1.75rem; left: 12.5%; right: 12.5%;
  height: 1px; background-color: rgba(15,27,46,.15); } }
.ll-timeline__grid { display: grid; gap: 2rem; }
@media (min-width: 768px) { .ll-timeline__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; } }
.ll-timeline__item { position: relative; }
@media (min-width: 768px) { .ll-timeline__item { text-align: center; } }
.ll-timeline__badge-wrap { display: flex; margin-bottom: 1rem; }
@media (min-width: 768px) { .ll-timeline__badge-wrap { justify-content: center; } }
.ll-timeline__badge { position: relative; z-index: 10; width: 3.5rem; height: 3.5rem; border-radius: 9999px;
  background-color: var(--ll-accent); color: #fff; display: flex; align-items: center; justify-content: center;
  font-family: var(--ll-font-display); letter-spacing: -0.02em; font-size: 1.25rem; line-height: 1.75rem;
  font-weight: 600; box-shadow: var(--ll-shadow-cta); }
/* The connector lines never get a z-index: the badges cover them with or without the reveal transform (spec 4.5). */
.ll-timeline__vline { position: absolute; left: 1.75rem; top: 3.5rem; transform: translateX(-50%);
  width: 1px; height: calc(100% - 1rem); background-color: rgba(15,27,46,.15); }
@media (min-width: 768px) { .ll-timeline__vline { display: none; } }
@media (min-width: 768px) { .ll-timeline__text { padding-left: .25rem; padding-right: .25rem; } }
.ll-timeline__week { color: var(--ll-accent); font-weight: 600; font-size: .875rem; line-height: 1.25rem; margin-bottom: .25rem; }
.ll-timeline__title { color: var(--ll-ink); margin-bottom: .5rem; }

/* ---------- Content "Co znajdziesz w środku?" (frontend-spec 5.1.5) ---------- */
.ll-content__grid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 1024px) { .ll-content__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ll-content__media { order: 2; transition: all 700ms var(--ll-ease); }
.ll-content__text { order: 1; }
@media (min-width: 1024px) { .ll-content__media { order: 1; } .ll-content__text { order: 2; } }
.ll-content__media > div { position: relative; }
.ll-content__img { position: relative; z-index: 10; width: 100%; height: auto; border-radius: 1rem;
  filter: drop-shadow(0 25px 25px rgba(0,0,0,.15)); }
.ll-motion .ll-revealroot:not(.is-visible) .ll-content__media { opacity: 0; transform: translateX(-1rem); }
.ll-content__text > * + * { margin-top: 1.5rem; }
.ll-content__text h2 { color: var(--ll-ink); }
.ll-content__list > * + * { margin-top: .75rem; }
.ll-feature { display: flex; align-items: flex-start; gap: .75rem; transition: all 500ms var(--ll-ease); }
.ll-feature svg { width: 1.25rem; height: 1.25rem; color: var(--ll-accent); flex-shrink: 0; margin-top: .125rem; }
.ll-feature span { color: var(--ll-ink); line-height: 1.625; }
.ll-motion .ll-revealroot:not(.is-visible) .ll-feature { opacity: 0; transform: translateX(1rem); }
.ll-content__buy { padding-top: .5rem; }
.ll-content__trust { display: flex; align-items: center; gap: .5rem; margin-bottom: 1.5rem; }
.ll-content__trust svg { width: 1.25rem; height: 1.25rem; color: var(--ll-accent); flex-shrink: 0; }
.ll-content__trust p { color: var(--ll-ink-muted); font-weight: 500; }

/* ---------- Comparison "Dwa scenariusze" (frontend-spec 4.6, 5.1.6) ---------- */
.ll-compare__head { text-align: center; margin-bottom: 3rem; }
.ll-compare__head p { color: var(--ll-paper-muted); font-size: 1.125rem; line-height: 1.75rem; margin-top: .75rem; }
.ll-compare__grid { display: grid; gap: 1.25rem; }
@media (min-width: 768px) { .ll-compare__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ll-compare__card { border-radius: 1rem; padding: 1.75rem; transition: all 700ms var(--ll-ease); }
.ll-compare__card--without { border: 1px solid rgba(255,255,255,.1); background-color: var(--ll-ink-soft); }
.ll-compare__card--with { border: 1px solid rgba(31,111,80,.4); background-color: rgba(31,111,80,.08); transition-delay: 150ms; }
.ll-compare__card h3 { font-family: var(--ll-font-display); letter-spacing: -0.02em; font-size: 1.25rem; line-height: 1.75rem;
  font-weight: 600; margin-bottom: 1.25rem; }
.ll-compare__card--without h3 { color: var(--ll-paper-muted); }
.ll-compare__card--with h3 { color: #fff; }
.ll-compare__card ul > * + * { margin-top: 1rem; }
.ll-compare__card li { display: flex; align-items: flex-start; gap: .75rem; }
.ll-compare__icon { flex-shrink: 0; width: 1.5rem; height: 1.5rem; border-radius: 9999px; margin-top: .125rem;
  display: flex; align-items: center; justify-content: center;
  background-color: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.15); }
.ll-compare__icon svg { width: .875rem; height: .875rem; color: var(--ll-paper-muted); }
.ll-compare__icon--on { background-color: var(--ll-accent); border: 0; }   /* modifier: the element also carries .ll-compare__icon */
.ll-compare__icon--on svg { color: #fff; }
.ll-compare__card--without li > span:last-child { color: var(--ll-paper-muted); line-height: 1.625; }
.ll-compare__card--with li > span:last-child { color: #fff; line-height: 1.625; }
.ll-motion .ll-compare:not(.is-visible) .ll-compare__card--without { opacity: 0; transform: translateX(-1rem); }
.ll-motion .ll-compare:not(.is-visible) .ll-compare__card--with    { opacity: 0; transform: translateX(1rem); }

/* ---------- Mechanism "Dlaczego to działa…" (frontend-spec 5.1.7) ---------- */
.ll-mech__head { text-align: center; margin-bottom: 3rem; }
.ll-mech__head h2 { color: var(--ll-ink); }
.ll-mech__grid { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .ll-mech__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ll-mech__card { padding: 1.5rem; border-radius: 1rem; background-color: var(--ll-paper-2); border: 1px solid rgba(15,27,46,.05); }
.ll-mech__card h3 { font-family: var(--ll-font-display); letter-spacing: -0.02em; font-size: 1.125rem; line-height: 1.75rem;
  font-weight: 600; color: var(--ll-ink); margin-bottom: .5rem; }
.ll-mech__card p { color: var(--ll-ink-muted); line-height: 1.625; }

/* ---------- Author "Dlaczego stworzyłem ten program?" (frontend-spec 5.1.8) ---------- */
.ll-author { border-radius: 1.5rem; background-color: #fff; border: 1px solid rgba(15,27,46,.05);
  box-shadow: var(--ll-shadow-card); padding: 2rem; transition: all 700ms var(--ll-ease); }
@media (min-width: 640px) { .ll-author { padding: 3rem; } }
.ll-author__head { display: flex; align-items: center; gap: 1.25rem; margin-bottom: 1.5rem; }
.ll-author__img { width: 5rem; height: 5rem; border-radius: 9999px; object-fit: cover;
  border: 2px solid rgba(31,111,80,.3); flex-shrink: 0; }        /* 80px incl. the 2px ring (border-box) */
.ll-author__title { font-family: var(--ll-font-display); letter-spacing: -0.02em; font-size: 1.5rem; line-height: 1.375;
  font-weight: 600; color: var(--ll-ink); }
@media (min-width: 640px) { .ll-author__title { font-size: 1.875rem; line-height: 2.25rem; } }
.ll-author__body { font-size: 1.125rem; line-height: 1.625; color: var(--ll-ink-muted); }
.ll-author__body > * + * { margin-top: 1rem; }
.ll-author__motto { font-family: var(--ll-font-display); letter-spacing: -0.02em; font-size: 1.25rem; line-height: 1.75rem;
  font-weight: 600; color: var(--ll-accent); }

/* ---------- FAQ "Najczęstsze pytania" (frontend-spec 4.7, 5.1.9; theme 4.4 and 5.6 #3) ---------- */
.ll-faq__head { text-align: center; margin-bottom: 2.5rem; }
.ll-faq__head h2 { color: var(--ll-ink); }
.ll-faq__list { transition: all 700ms var(--ll-ease); }
.ll-faq__item { border-bottom: 1px solid rgba(15,27,46,.1); }      /* no top border on the first item */
.ll-faq__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-top: 1.25rem; padding-bottom: 1.25rem; text-align: left; }
.ll-faq__q-text { font-family: var(--ll-font-display); letter-spacing: -0.02em; font-size: 1.125rem; line-height: 1.75rem;
  font-weight: 600; color: var(--ll-ink); }
.ll-faq__chev { width: 1.25rem; height: 1.25rem; color: var(--ll-accent); flex-shrink: 0;
  transition: transform 300ms var(--ll-ease); }
/* Open by default (no JS): answers visible, chevrons hidden. Closed states exist only once faq.js has added .is-enhanced;
   .is-initialising suppresses the collapse animation while the panels are first closed. */
.ll-faq:not(.is-enhanced) .ll-faq__chev { visibility: hidden; }
.ll-faq.is-enhanced .ll-faq__item.is-open .ll-faq__chev { transform: rotate(180deg); }
.ll-faq__panel { display: grid; grid-template-rows: 1fr; opacity: 1; transition: all 300ms var(--ll-ease-out); }
.ll-faq.is-enhanced .ll-faq__item:not(.is-open) .ll-faq__panel { grid-template-rows: 0fr; opacity: 0; }
.ll-faq.is-initialising .ll-faq__panel, .ll-faq.is-initialising .ll-faq__chev { transition: none; }
.ll-faq__panel-inner { overflow: hidden; }          /* min-height:auto resolves to 0 because of overflow:hidden */
.ll-faq__a { color: var(--ll-ink-muted); line-height: 1.625; padding-bottom: 1.25rem; padding-right: 2rem; }
.ll-motion .ll-faq:not(.is-visible) .ll-faq__list { opacity: 0; transform: translateY(1rem); }

/* ---------- Final CTA (frontend-spec 5.1.10) ---------- */
.ll-final { border-radius: 1.5rem; border: 1px solid rgba(31,111,80,.3); background-color: var(--ll-ink-soft);
  padding: 2rem; text-align: center; transition: all 700ms var(--ll-ease); }
@media (min-width: 640px) { .ll-final { padding: 3rem; } }
.ll-motion .ll-revealroot:not(.is-visible) .ll-final { opacity: 0; transform: scale(.98); }
.ll-final h2 { font-family: var(--ll-font-display); letter-spacing: -0.02em; font-size: 1.875rem; line-height: 2.25rem;
  font-weight: 600; margin-bottom: .5rem; }                                   /* colour inherited #fff */
@media (min-width: 640px) { .ll-final h2 { font-size: 2.25rem; line-height: 2.5rem; } }
.ll-final__sub { color: var(--ll-paper-muted); font-size: 1.125rem; line-height: 1.75rem; margin-bottom: 2rem; }
.ll-final__label { color: var(--ll-paper-muted); font-size: .875rem; line-height: 1.25rem; margin-bottom: .25rem; }
.ll-final__price { display: flex; align-items: baseline; justify-content: center; gap: .75rem; margin-bottom: .5rem; }
/* No previous price: the struck price and the omnibus line are omitted (theme 3.2), so the price keeps the
   2rem gap the omnibus line would have left before the button. Never rendered at the default prices. */
.ll-final__price--solo { margin-bottom: 2rem; }
.ll-final__now { font-family: var(--ll-font-display); letter-spacing: -0.02em; font-size: 3.75rem; line-height: 1;
  font-weight: 600; color: var(--ll-accent); }
@media (min-width: 640px) { .ll-final__now { font-size: 4.5rem; line-height: 1; } }
.ll-final__was { font-size: 1.5rem; line-height: 2rem; color: var(--ll-paper-muted); text-decoration-line: line-through; }
.ll-final__omnibus { color: var(--ll-paper-muted); font-size: .875rem; line-height: 1.25rem; margin-bottom: 2rem; }
.ll-final__secure { font-size: .875rem; line-height: 1.25rem; color: var(--ll-paper-muted); margin-top: .75rem; }
.ll-final__secure svg { display: inline; width: .875rem; height: .875rem; color: var(--ll-accent); margin-right: .25rem; }
   /* inline SVG keeps the reset's vertical-align: middle */
.ll-final__guarantee { display: flex; align-items: flex-start; gap: .75rem; padding: 1rem; margin-top: 1.5rem;
  border: 1px solid rgba(31,111,80,.25); border-radius: .75rem; background-color: rgba(31,111,80,.06); text-align: left; }
.ll-final__guarantee svg { width: 1.25rem; height: 1.25rem; color: var(--ll-accent); flex-shrink: 0; margin-top: .125rem; }
.ll-final__guarantee p { font-size: .875rem; line-height: 1.625; color: var(--ll-paper-muted); }
.ll-final__guarantee p span { color: #fff; font-weight: 500; }
.ll-final__trust { padding-top: 2rem; margin-top: 2rem; border-top: 1px solid rgba(255,255,255,.1);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.ll-final__trust > div { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.ll-final__trust svg { width: 1.75rem; height: 1.75rem; color: var(--ll-accent); }
.ll-final__trust span { font-size: .75rem; line-height: 1rem; color: var(--ll-paper-muted); font-weight: 500; }