/* =========================================================
   useskill.it · landing.css: le classi in più delle landing in skill/
   (rilancio 1 ottobre 2026, task 9b1)

   Si carica DOPO il foglio condiviso della home, sempre con la versione,
   perché vercel.json manda /assets con cache immutable per un anno:
     <link rel="stylesheet" href="/assets/css/useskill.css?v=2">
     <link rel="stylesheet" href="/assets/css/landing.css?v=1">
   Ogni modifica a questo file alza il ?v= in tutte le landing che lo usano.

   Regola: qui si AGGIUNGONO classi, tutte con il prefisso lp-. Nessuna
   classe di useskill.css viene ridefinita; i token (--ink, --acid, --bw,
   --ease-out...) e i componenti (.btn, .file, .req, .frame, .gestures,
   .faq, .legal, .footer, .cookie-banner) vengono da lì.

   Indice
     1. Percorso: .lp-crumbs
     2. Testata: .lp-hero .lp-title .lp-name .lp-promise .lp-lede
     3. Blocco d'acquisto: .lp-buy .lp-price .lp-buy-action
     4. Collage della testata, solo da desktop: .lp-collage .lp-shot
     5. Cosa ti consegna: .lp-modes .lp-out .lp-reels .lp-deliver .lp-chips
     6. Sul computer e nello ZIP: .lp-req .lp-spec .lp-need .lp-zip
     7. Catalogo social e freebie: .lp-more .lp-offer
     8. Acquisto in fondo: .lp-final
     9. Movimento legato allo scorrimento (solo senza movimento ridotto)
   ========================================================= */

/* ---------- 1. percorso ---------- */

.lp-crumbs { padding-top: 10px; }
.lp-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 10px;
  font-family: var(--f-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-2);
}
.lp-crumbs li { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; }
.lp-crumbs li + li::before { content: '/'; content: '/' / ''; color: var(--ink-2); }
.lp-crumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.lp-crumbs [aria-current="page"] { color: var(--ink); font-weight: 700; }

/* ---------- 2. testata ---------- */

.lp-hero { position: relative; overflow-x: clip; }
.lp-hero-grid { display: grid; padding-block: 0 clamp(56px, 7vw, 112px); }
.lp-hero-text { display: grid; gap: 22px; align-content: start; min-width: 0; }

/* h1 = nome del prodotto + promessa, due righe di peso diverso */
.lp-title { display: grid; gap: 18px; }
.lp-name {
  display: block;
  font-family: var(--f-display);
  font-weight: 800;
  font-variation-settings: 'wdth' 75, 'opsz' 96;
  font-size: clamp(3.5rem, 1.1rem + 7.4vw, 7.5rem);
  line-height: 0.84;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.lp-promise {
  display: block;
  max-width: 21ch;
  font-family: var(--f-display);
  font-weight: 800;
  font-variation-settings: 'wdth' 85, 'opsz' 48;
  font-size: clamp(1.625rem, 1.15rem + 1.9vw, 2.875rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.lp-lede {
  max-width: 52ch;
  font-size: clamp(1.0625rem, 0.98rem + 0.4vw, 1.3125rem);
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}
@media (max-width: 359px) {
  .lp-name { font-size: 3rem; }
  .lp-promise { font-size: 1.5rem; }
}
@media (min-width: 1000px) {
  .lp-hero-grid {
    grid-template-columns: minmax(0, 1fr) clamp(300px, 31vw, 460px);
    column-gap: clamp(48px, 6vw, 112px);
  }
}

/* ---------- 3. blocco d'acquisto ----------
   Un biglietto acido con l'ombra piena: prezzo, pulsante, rimando al
   Catalogo social. Il pulsante è un vero <a> con data-acquisto. */

.lp-buy {
  display: grid;
  gap: 20px;
  max-width: 660px;
  margin-right: 14px;          /* lo spazio dell'ombra sui telefoni */
  padding: 22px 20px 24px;
  background: var(--acid);
  color: var(--ink);
  border: var(--bw) solid var(--ink);
  box-shadow: 12px 12px 0 0 var(--ink);
}
.lp-buy-row { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
.lp-price {
  font-family: var(--f-display);
  font-weight: 800;
  font-variation-settings: 'wdth' 75, 'opsz' 96;
  font-size: clamp(4.25rem, 3rem + 4vw, 6rem);
  line-height: 0.8;
  letter-spacing: -0.04em;
}
.lp-buy-action { display: grid; gap: 12px; justify-items: start; }
.lp-buy-note { font-family: var(--f-mono); font-size: 0.75rem; font-weight: 500; line-height: 1.5; }
.lp-buy-more {
  padding-top: 14px;
  border-top: 2px solid var(--ink);
  font-size: 0.9375rem;
  line-height: 1.45;
  text-wrap: pretty;
}
.lp-link { font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
@media (min-width: 560px) {
  .lp-buy { padding: 26px 28px 28px; }
}

/* ---------- 4. collage della testata ----------
   Solo da desktop e solo decorativo (aria-hidden): sui telefoni le stesse
   uscite arrivano subito dopo, nella sezione Cosa ti consegna. */

.lp-collage { display: none; }
@media (min-width: 1000px) {
  .lp-collage { display: block; position: relative; margin-top: 56px; pointer-events: none; }
  .lp-collage-slides { aspect-ratio: 1 / 1.3; }
  .lp-collage-tall { aspect-ratio: 1 / 1.5; }
  .lp-collage-solo { aspect-ratio: 1 / 1.45; }
  .lp-shot {
    position: absolute;
    margin: 0;
    border: var(--bw) solid var(--ink);
    background: var(--ink);
  }
  .lp-shot img { width: 100%; height: auto; }
  .lp-shot-a { left: 0; top: 0; width: 66%; transform: rotate(-4deg); box-shadow: 14px 14px 0 0 var(--ink); }
  .lp-shot-b {
    right: 0;
    top: 30%;
    width: 58%;
    z-index: var(--z-raised);
    transform: rotate(3deg);
    box-shadow: 14px 14px 0 0 var(--acid), 14px 14px 0 var(--bw) var(--ink);
  }
  .lp-shot-solo {
    left: 8%;
    top: 2%;
    width: 78%;
    transform: rotate(3deg);
    box-shadow: 16px 16px 0 0 var(--acid), 16px 16px 0 var(--bw) var(--ink);
  }
}

/* ---------- 5. cosa ti consegna (dentro .proofs, fondo ink) ---------- */

/* Caroselli Pro: le due modalità, una slide ciascuna */
.lp-modes { display: grid; gap: clamp(64px, 8vw, 104px); }
.lp-mode { display: grid; gap: 30px; align-items: start; }
.lp-mode img {
  width: 100%;
  max-width: 470px;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: var(--bw) solid var(--bone);
  box-shadow: 12px 12px 0 0 var(--acid);
  background: var(--ink);
}
.lp-mode-text { display: grid; gap: 14px; align-content: start; justify-items: start; max-width: 56ch; }
.lp-mode-k { font-family: var(--f-mono); font-size: 0.8125rem; line-height: 1; }
.lp-mode h3 {
  font-family: var(--f-display);
  font-weight: 800;
  font-variation-settings: 'wdth' 80, 'opsz' 48;
  font-size: clamp(1.75rem, 1.2rem + 2vw, 3rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--bone);
  text-wrap: balance;
}
.lp-mode-desc { color: var(--on-ink-2); text-wrap: pretty; }
.lp-files { display: flex; flex-wrap: wrap; gap: 8px; }
@media (min-width: 900px) {
  .lp-modes { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(40px, 5vw, 96px); }
  .lp-mode:nth-child(2) { margin-top: 120px; }
}

/* Lavagna e Mappa: reel a sinistra, file consegnati a destra */
.lp-out { display: grid; gap: 64px; }
.lp-out-media { min-width: 0; }
.lp-reel { width: min(86%, 400px); }
.lp-reels { display: grid; gap: 56px; }
.lp-reels > li { width: min(86%, 380px); }
.lp-reels > li:nth-child(even) { margin-left: auto; }
.lp-out-text { display: grid; gap: 22px; align-content: start; min-width: 0; }
.lp-out-h {
  font-family: var(--f-display);
  font-weight: 800;
  font-variation-settings: 'wdth' 85, 'opsz' 48;
  font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.25rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--bone);
}
.lp-out-h + .lp-deliver, .lp-out-h + .lp-chips { margin-top: -4px; }
.lp-out-text > .lp-out-h:not(:first-child) { margin-top: 18px; }
.lp-deliver { border-top: var(--bw) solid var(--bone); }
.lp-deliver > div {
  display: grid;
  gap: 8px;
  padding-block: 16px;
  border-bottom: 1px solid var(--on-ink-line);
}
.lp-deliver dt { display: flex; flex-wrap: wrap; gap: 6px; }
.lp-deliver dd { margin: 0; color: var(--on-ink-2); text-wrap: pretty; }
.lp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lp-chips li {
  font-family: var(--f-mono);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1;
  padding: 8px 10px;
  border: 2px solid var(--bone);
  color: var(--bone);
}
@media (min-width: 560px) {
  .lp-deliver > div { grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr); gap: 20px; align-items: baseline; }
}
@media (min-width: 640px) {
  .lp-reels { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; align-items: start; }
  .lp-reels > li { width: 100%; }
  .lp-reels > li:nth-child(even) { margin: 96px 0 0; }
}
@media (min-width: 1000px) {
  .lp-out { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(48px, 6vw, 112px); align-items: start; }
  .lp-out-pair { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .lp-reel { width: min(100%, 420px); }
}

/* ---------- 6. sul computer e nello zip ---------- */

.lp-req {
  padding-block: clamp(72px, 9vw, 140px);
  border-bottom: var(--bw) solid var(--ink);
}
.lp-req-grid { display: grid; gap: 56px; }
.lp-spec { border-top: var(--bw) solid var(--ink); }
.lp-spec-row {
  display: grid;
  gap: 12px;
  padding-block: 20px 22px;
  border-bottom: var(--bw) solid var(--ink);
}
.lp-spec dt {
  font-family: var(--f-display);
  font-weight: 800;
  font-variation-settings: 'wdth' 85, 'opsz' 24;
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.lp-spec dd { margin: 0; display: grid; gap: 10px; justify-items: start; max-width: 60ch; }
.lp-spec-text { color: var(--ink-2); text-wrap: pretty; }

/* serve, solo per una modalità o un livello, facoltativo */
.lp-need {
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  padding: 6px 8px;
  background: var(--ink);
  color: var(--acid);
  border: 2px solid var(--ink);
}
.lp-need-solo { background: var(--acid); color: var(--ink); }
.lp-need-opt { background: transparent; color: var(--ink); border-style: dashed; }

.lp-zip {
  display: grid;
  gap: 18px;
  align-content: start;
  padding: 24px 20px 26px;
  background: var(--bone-2);
  border: var(--bw) solid var(--ink);
}
.lp-zip h3 {
  font-family: var(--f-display);
  font-weight: 800;
  font-variation-settings: 'wdth' 85, 'opsz' 24;
  font-size: 1.5rem;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.lp-zip-list { display: grid; gap: 14px; }
.lp-zip-list li { display: grid; gap: 6px; justify-items: start; font-size: 0.9375rem; line-height: 1.45; color: var(--ink-2); }
.lp-zip-list .file { color: var(--ink); }
@media (min-width: 760px) {
  .lp-spec-row { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); gap: 24px; align-items: baseline; }
}
@media (min-width: 1000px) {
  .lp-req-grid { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 96px); align-items: start; }
  .lp-zip { position: sticky; top: calc(var(--nav-h) + 32px); padding: 28px 26px 30px; }
}

/* ---------- 7. catalogo social e freebie ---------- */

.lp-more {
  padding-block: clamp(72px, 9vw, 140px);
  background: var(--bone-2);
  border-top: var(--bw) solid var(--ink);
}
.lp-more-grid { display: grid; gap: 48px; }
.lp-offer {
  position: relative;
  display: grid;
  gap: 16px;
  align-content: start;
  justify-items: start;
  margin-right: 14px;
  padding: 30px 22px 32px;
  border: var(--bw) solid var(--ink);
}
.lp-offer h3 {
  font-family: var(--f-display);
  font-weight: 800;
  font-variation-settings: 'wdth' 80, 'opsz' 48;
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3.5rem);
  line-height: 0.92;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.lp-offer-desc { max-width: 46ch; text-wrap: pretty; }
.lp-offer-note { font-family: var(--f-mono); font-size: 0.75rem; line-height: 1.6; }
.lp-offer-note a { font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.lp-offer .btn { margin-top: 6px; }
.lp-offer-ink {
  background: var(--ink);
  color: var(--bone);
  box-shadow: 12px 12px 0 0 var(--acid), 12px 12px 0 var(--bw) var(--ink);
  --focus: var(--acid);
}
.lp-offer-ink .lp-offer-desc { color: var(--on-ink-2); }
.lp-offer-price {
  font-family: var(--f-display);
  font-weight: 800;
  font-variation-settings: 'wdth' 75, 'opsz' 96;
  font-size: clamp(3.5rem, 2.4rem + 4vw, 5.5rem);
  line-height: 0.8;
  letter-spacing: -0.04em;
  color: var(--acid);
}
.lp-offer-price s { font-size: 0.42em; letter-spacing: -0.02em; color: var(--on-ink-2); margin-left: 6px; }
.lp-offer-acid { background: var(--acid); color: var(--ink); box-shadow: 12px 12px 0 0 var(--ink); }
.lp-offer .sticker { right: 20px; }
@media (min-width: 900px) {
  .lp-more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 5vw, 80px); align-items: stretch; }
  .lp-offer { padding: 38px 34px 40px; }
}

/* ---------- 8. acquisto in fondo ---------- */

.lp-final {
  background: var(--ink);
  color: var(--bone);
  padding-block: clamp(72px, 9vw, 140px);
  overflow-x: clip;
  --focus: var(--acid);
}
.lp-final-inner { display: grid; gap: 28px; }
.lp-final-title {
  font-family: var(--f-display);
  font-weight: 800;
  font-variation-settings: 'wdth' 75, 'opsz' 96;
  font-size: clamp(3rem, 1rem + 7.4vw, 8.5rem);
  line-height: 0.86;
  letter-spacing: -0.04em;
  color: var(--bone);
  text-wrap: balance;
}
.lp-final-price {
  font-family: var(--f-display);
  font-weight: 800;
  font-variation-settings: 'wdth' 75, 'opsz' 96;
  font-size: clamp(5rem, 3rem + 8vw, 10rem);
  line-height: 0.8;
  letter-spacing: -0.04em;
  color: var(--acid);
}
.lp-final-action { display: grid; gap: 14px; justify-items: start; }
.lp-final-note { font-family: var(--f-mono); font-size: 0.75rem; line-height: 1.5; color: var(--on-ink-2); max-width: 44ch; }
@media (max-width: 359px) {
  .lp-final-title { font-size: 2.625rem; }
}
@media (min-width: 960px) {
  /* prezzo e pulsante affiancati sotto il nome, allineati a sinistra */
  .lp-final-inner { grid-template-columns: auto minmax(0, 1fr); align-items: end; column-gap: clamp(40px, 5vw, 80px); }
  .lp-final-title { grid-column: 1 / -1; }
  .lp-final-action { padding-bottom: 10px; }
}

/* ---------- 9. movimento legato allo scorrimento ----------
   Come nella home: solo dove il browser ha le timeline di scorrimento e
   solo senza movimento ridotto. Le animazioni spostano, non nascondono:
   il contenuto è visibile anche dove non partono. I keyframe (drift-slide,
   drift-reel, push-in, price-in) sono quelli di useskill.css. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .lp-final-title {
      animation: push-in var(--ease-out) both;
      animation-timeline: view();
      animation-range: entry 0% cover 35%;
    }
    .lp-final-price {
      animation: price-in var(--ease-out) both;
      animation-timeline: view();
      animation-range: entry 0% cover 40%;
      transform-origin: left bottom;
    }
  }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 1000px) {
  @supports (animation-timeline: scroll()) {
    .lp-shot-a {
      animation: drift-slide linear both;
      animation-timeline: scroll(root block);
      animation-range: 0px 900px;
    }
    .lp-shot-b, .lp-shot-solo {
      animation: drift-reel linear both;
      animation-timeline: scroll(root block);
      animation-range: 0px 900px;
    }
  }
}