/* =========================================================
   useskill.it · landing del freebie e del Catalogo social
   (skill/brand-voice-humanizer.html, skill/bundle-completo.html)

   Si appoggia a useskill.css: token, bottoni, header, hero, fascia del
   freebie, gesti, domande, recesso, footer e banner arrivano da lì e qui
   non si ridefiniscono. In questo file stanno solo le classi nuove, tutte
   col prefisso lp-, più due ritocchi dichiarati sulle classi della home
   quando stanno dentro una landing (.lp-bhero, .lp-hero-file).

   Si collega dopo useskill.css, con la versione (cache immutable):
     <link rel="stylesheet" href="/assets/css/useskill.css?v=2">
     <link rel="stylesheet" href="/assets/css/landing-bundle.css?v=1">
   Ogni modifica a questo file alza ?v= nelle due pagine.

   Indice
     1. Briciole
     2. Freebie: nome del prodotto nel titolo, file nella hero
     3. Freebie: cosa consegna (.lp-out, .lp-doc)
     4. Freebie: il passo dopo (.lp-next)
     5. Catalogo: hero acida (.lp-bhero)
     6. Catalogo: le quattro skill (.lp-skills)
     7. Catalogo: il conto (.lp-bill, .lp-receipt)
     8. Catalogo: cosa c'è nello ZIP (.lp-tree)
     9. Movimento e movimento ridotto
   ========================================================= */

/* ---------- 1. briciole ---------- */

.lp-crumbs { margin-bottom: 6px; }
.lp-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 10px;
  font-family: var(--f-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.lp-crumbs li { display: inline-flex; align-items: center; gap: 10px; }
.lp-crumbs li + li::before { content: '/'; content: '/' / ''; color: var(--ink-2); }
.lp-crumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: text-decoration-color 160ms ease;
}
.lp-crumbs [aria-current="page"] { color: var(--ink-2); }
/* sotto i 600 px la pagina corrente si legge già nel titolo subito sotto:
   resta per i lettori di schermo, sparisce alla vista */
@media (max-width: 599px) {
  .lp-crumbs li:last-child {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
  }
}
@media (hover: hover) and (pointer: fine) {
  .lp-crumbs a:hover { text-decoration-color: var(--acid); }
  .lp-bhero .lp-crumbs a:hover { text-decoration-color: var(--bone); }
}

/* nome di file dentro una frase: non si spezza sul trattino */
.lp-nb { white-space: nowrap; }

/* ---------- 2. freebie: titolo e file nella hero ---------- */

/* il nome del prodotto dentro l'h1, sopra la promessa */
.lp-kicker {
  display: block;
  margin-bottom: 0.32em;
  font-family: var(--f-display);
  font-weight: 800;
  font-variation-settings: 'wdth' 85, 'opsz' 24;
  font-size: clamp(1.25rem, 0.5rem + 1.6vw, 2rem);
  line-height: 1;
  letter-spacing: -0.02em;
}
.lp-kicker::before {
  content: '';
  display: inline-block;
  width: 0.62em;
  height: 0.62em;
  margin-right: 0.36em;
  background: var(--acid);
  border: 2px solid var(--ink);
  vertical-align: 0.02em;
}

/* il file PROFILE.md che si vede a destra da desktop: un'immagine del
   risultato, aria-hidden (le otto sezioni sono scritte sotto, in .lp-out) */
.lp-hero-file { display: none; }
@media (min-width: 1000px) {
  .lp-hero-file {
    display: block;
    position: absolute;
    right: var(--gutter);
    top: 26px;
    z-index: 3;
    width: clamp(300px, 30vw, 440px);
    pointer-events: none;
  }
}
.lp-sheet {
  background: var(--bone);
  color: var(--ink);
  border: var(--bw) solid var(--ink);
  box-shadow: 14px 14px 0 0 var(--ink);
}
.lp-sheet-md { width: 88%; transform: rotate(-3deg); }
.lp-sheet-json {
  position: absolute;
  right: 0;
  top: 58%;
  width: 62%;
  background: var(--ink);
  color: var(--bone);
  box-shadow: 14px 14px 0 0 var(--acid), 14px 14px 0 var(--bw) var(--ink);
  transform: rotate(3deg);
}
.lp-sheet-bar {
  padding: 9px 14px;
  background: var(--ink);
  color: var(--acid);
  font-family: var(--f-mono);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.3;
}
.lp-sheet-json .lp-sheet-bar { background: var(--acid); color: var(--ink); border-bottom: var(--bw) solid var(--ink); }
.lp-sheet-body {
  padding: 14px 16px 18px;
  font-family: var(--f-mono);
  font-size: 0.75rem;
  line-height: 1.6;
  white-space: pre;      /* righe intere, tagliate dal bordo come in una finestra */
  overflow: hidden;
}
.lp-md-h { font-weight: 700; }
.lp-md-mark { color: var(--ink-2); }
.lp-md-v { color: var(--ink-2); }
.lp-sheet-json .lp-sheet-body { color: var(--on-ink-2); }
.lp-k { color: var(--acid); }

/* ---------- 3. freebie: cosa consegna ---------- */

.lp-out {
  background: var(--ink);
  color: var(--bone);
  padding-block: clamp(64px, 8vw, 128px);
  overflow-x: clip;
  --focus: var(--acid);
}
.lp-out .big-head h2 { color: var(--bone); }
.lp-out .big-head p { color: var(--on-ink-2); }
.lp-out-grid { display: grid; gap: 56px; }
@media (min-width: 960px) {
  .lp-out-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; gap: clamp(48px, 5vw, 96px); }
  .lp-out-grid .lp-doc-dark { margin-top: 96px; }
}

.lp-doc {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  border: var(--bw) solid var(--bone);
  box-shadow: 12px 12px 0 0 var(--acid);
}
.lp-doc-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 12px 16px;
  background: var(--acid);
  color: var(--ink);
  border-bottom: var(--bw) solid var(--ink);
  font-family: var(--f-mono);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
}
.lp-doc-tag {
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 7px;
  background: var(--ink);
  color: var(--acid);
}
.lp-doc-body { display: grid; gap: 18px; padding: 8px 20px 24px; }
.lp-doc-text { color: var(--ink-2); text-wrap: pretty; max-width: 60ch; }
.lp-doc-text strong { color: var(--ink); }

.lp-sections li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-block: 12px;
  border-bottom: 2px solid var(--ink);
  font-family: var(--f-display);
  font-weight: 800;
  font-variation-settings: 'wdth' 85, 'opsz' 24;
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
}
.lp-sections .lp-hash {
  flex: none;
  min-width: 3.4em;
  font-family: var(--f-mono);
  font-variation-settings: normal;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--ink-2);
}
.lp-sections .lp-sec-voice { background: var(--acid); margin-inline: -20px; padding-inline: 20px; }
.lp-sections .lp-sec-voice .lp-hash { color: var(--ink); }

.lp-doc-dark {
  background: var(--ink);
  color: var(--bone);
  border-color: var(--bone);
  box-shadow: 12px 12px 0 0 var(--bone);
}
.lp-doc-dark .lp-doc-bar { background: var(--bone); color: var(--ink); border-bottom-color: var(--bone); }
.lp-doc-dark .lp-doc-text { color: var(--on-ink-2); }
.lp-doc-dark .lp-doc-text strong { color: var(--bone); }
.lp-code {
  margin: 0;
  padding: 18px 20px 4px;
  font-family: var(--f-mono);
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--on-ink-2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.lp-code .lp-k { color: var(--acid); }

/* ---------- 4. freebie: il passo dopo ---------- */

.lp-next {
  background: var(--acid);
  color: var(--ink);
  border-block: var(--bw) solid var(--ink);
  padding-block: clamp(64px, 8vw, 128px);
  overflow-x: clip;
}
.lp-next-grid { display: grid; gap: 48px; }
.lp-next-media img {
  width: min(78%, 400px);
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: var(--bw) solid var(--ink);
  box-shadow: 14px 14px 0 0 var(--ink);
  background: var(--ink);
  transform: rotate(-3deg);
}
.lp-next-text { display: grid; gap: 18px; align-content: start; }
.lp-h2 {
  font-family: var(--f-display);
  font-weight: 800;
  font-variation-settings: 'wdth' 75, 'opsz' 96;
  font-size: clamp(2.75rem, 1rem + 5.6vw, 6rem);
  line-height: 0.88;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.lp-next-text p { max-width: 46ch; font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem); line-height: 1.45; text-wrap: pretty; }
.lp-next-text .lp-small { font-size: 1rem; color: var(--ink-2); }
.lp-next-text a:not(.text-link) { text-decoration-thickness: 2px; text-underline-offset: 4px; }
.lp-next-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; }
/* sul fondo acido il prezzo prende il colore inverso, come sui fondi ink */
.lp-next .price-chip { background: var(--ink); color: var(--acid); transform: none; }
@media (min-width: 900px) {
  .lp-next-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(48px, 6vw, 112px); }
  .lp-next-media img { width: min(100%, 420px); }
}

/* ---------- 5. catalogo: hero acida ----------
   Usa le classi del blocco .bundle della home (.bundle-top, .bundle-price,
   .bundle-amount, .bundle-was, .bundle-off, .bundle-lede, .buy-bundle):
   chi arriva da "Vedi cosa contiene" ritrova lo stesso blocco, qui con l'h1. */

.lp-bhero { padding-block: 18px clamp(56px, 7vw, 104px); border-top: 0; }
.lp-bhero .lp-crumbs [aria-current="page"] { color: var(--ink-2); }
.lp-bhero-title {
  font-family: var(--f-display);
  font-weight: 800;
  font-variation-settings: 'wdth' 75, 'opsz' 96;
  font-size: clamp(3.25rem, 1rem + 8vw, 9rem);
  line-height: 0.84;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
@media (max-width: 359px) {
  .lp-bhero-title { font-size: 2.75rem; }
}
.lp-bhero .bundle-top { padding-top: 10px; }
.lp-bhero-grid { display: grid; gap: 32px; margin-top: 28px; }
.lp-bhero-grid .bundle-lede { margin-top: 0; }
.lp-bhero-grid .buy-bundle { position: static; }
@media (min-width: 960px) {
  .lp-bhero-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; gap: clamp(40px, 6vw, 112px); }
}

/* ---------- 6. catalogo: le quattro skill ---------- */

.lp-skills-sec { padding-block: clamp(72px, 9vw, 140px); overflow-x: clip; }
.lp-skills { border-top: var(--bw) solid var(--ink); }
.lp-skill {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  grid-template-areas:
    "media head"
    "body body";
  gap: 18px 18px;
  padding-block: 28px 32px;
  border-bottom: var(--bw) solid var(--ink);
}
.lp-skill-media { grid-area: media; }
.lp-skill-head {
  grid-area: head;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 16px;
  align-self: center;
}
.lp-skill-body { grid-area: body; display: grid; gap: 14px; justify-items: start; }
.lp-skill-name {
  font-family: var(--f-display);
  font-weight: 800;
  font-variation-settings: 'wdth' 80, 'opsz' 48;
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3.25rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.lp-skill-price {
  font-family: var(--f-display);
  font-weight: 800;
  font-variation-settings: 'wdth' 75, 'opsz' 96;
  font-size: clamp(1.75rem, 1.2rem + 2vw, 3rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  white-space: nowrap;
  margin-left: auto;
}
.lp-skill-desc { max-width: 58ch; color: var(--ink-2); text-wrap: pretty; }
.lp-skill-files { display: flex; flex-wrap: wrap; gap: 6px; }
.lp-skill .text-link { margin-top: -6px; }

.lp-thumb {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: var(--bw) solid var(--ink);
  box-shadow: 6px 6px 0 0 var(--ink);
  background: var(--ink);
}
.lp-skill:nth-child(odd) .lp-thumb { transform: rotate(-2deg); }
.lp-skill:nth-child(even) .lp-thumb { transform: rotate(2deg); }

/* miniatura del file PROFILE.md per Brand Voice Extractor (aria-hidden) */
.lp-thumb-doc {
  display: grid;
  align-content: start;
  overflow: hidden;
  background: var(--bone);
}
.lp-thumb-doc span {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: clip;
  font-family: var(--f-mono);
  font-weight: 700;
  line-height: 1.5;
}
.lp-thumb-doc .lp-thumb-bar { padding: 4px 6px; background: var(--acid); border-bottom: 2px solid var(--ink); font-size: 0.5625rem; }
.lp-thumb-doc .lp-thumb-line { padding-inline: 6px; font-size: 0.5rem; color: var(--ink-2); }
.lp-thumb-doc .lp-thumb-line:nth-child(2) { padding-top: 6px; }

@media (min-width: 900px) {
  .lp-skill {
    grid-template-columns: clamp(170px, 16vw, 230px) minmax(0, 1fr);
    grid-template-areas:
      "media head"
      "media body";
    grid-template-rows: auto 1fr;
    gap: 16px clamp(32px, 4vw, 64px);
    padding-block: 40px 44px;
  }
  .lp-skill-head { align-self: start; flex-wrap: nowrap; }
  .lp-thumb { box-shadow: 10px 10px 0 0 var(--ink); }
  .lp-thumb-doc .lp-thumb-bar { padding: 7px 10px; font-size: 0.75rem; border-bottom-width: var(--bw); }
  .lp-thumb-doc .lp-thumb-line { padding-inline: 10px; font-size: 0.6875rem; line-height: 1.75; }
  .lp-thumb-doc .lp-thumb-line:nth-child(2) { padding-top: 10px; }
}

/* ---------- 7. catalogo: il conto ---------- */

.lp-bill {
  background: var(--ink);
  color: var(--bone);
  padding-block: clamp(72px, 9vw, 140px);
  overflow-x: clip;
  --focus: var(--acid);
}
.lp-bill .big-head h2 { color: var(--bone); }
.lp-bill .big-head p { color: var(--on-ink-2); }
.lp-bill-grid { display: grid; gap: 8px; }
.lp-bill-main { display: grid; gap: 40px; justify-items: start; }
@media (min-width: 1000px) {
  .lp-bill-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 112px); align-items: start; }
  .lp-bill-grid .big-head { position: sticky; top: calc(var(--nav-h) + 32px); margin-bottom: 0; }
}

.lp-receipt {
  width: 100%;
  max-width: 640px;
  border-collapse: collapse;
  background: var(--bone);
  color: var(--ink);
  border: var(--bw) solid var(--bone);
  box-shadow: 12px 12px 0 0 var(--acid);
  font-family: var(--f-mono);
  font-size: 0.9375rem;
}
.lp-receipt th, .lp-receipt td {
  padding: 14px 18px;
  border-bottom: 2px dashed var(--ink);
  vertical-align: baseline;
}
.lp-receipt th { text-align: left; font-weight: 500; }
.lp-receipt td { text-align: right; font-weight: 700; white-space: nowrap; }
.lp-receipt tbody tr:last-child th, .lp-receipt tbody tr:last-child td { border-bottom: var(--bw) solid var(--ink); }
.lp-receipt tfoot th { font-weight: 700; }
.lp-r-total th, .lp-r-total td {
  background: var(--acid);
  font-family: var(--f-display);
  font-weight: 800;
  font-variation-settings: 'wdth' 75, 'opsz' 96;
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  border-bottom: var(--bw) solid var(--ink);
}
.lp-r-sum td s { text-decoration-thickness: 2px; }
.lp-r-save th, .lp-r-save td { border-bottom: 0; }
.lp-r-save td span {
  display: inline-block;
  margin-left: 6px;
  padding: 3px 7px;
  background: var(--ink);
  color: var(--acid);
}
.lp-bill-buy { display: grid; gap: 14px; justify-items: start; }
.lp-bill-note { font-family: var(--f-mono); font-size: 0.8125rem; line-height: 1.5; color: var(--on-ink-2); max-width: 46ch; }
@media (max-width: 359px) {
  .lp-receipt { font-size: 0.8125rem; }
  .lp-receipt th, .lp-receipt td { padding: 12px 12px; }
}

/* ---------- 8. catalogo: cosa c'è nello ZIP ---------- */

.lp-tree {
  justify-self: start;
  display: grid;
  gap: 8px;
  padding: 18px 20px;
  background: var(--bone-2);
  border: var(--bw) solid var(--ink);
  font-family: var(--f-mono);
  font-size: 0.8125rem;
  font-weight: 500;
}
.lp-tree ul { display: grid; gap: 8px; margin-top: 8px; padding-left: 4px; }
.lp-tree ul li { display: flex; align-items: center; gap: 8px; }
/* i rami si vedono e non si leggono: il testo alternativo vuoto li toglie ai lettori di schermo
   (chi non capisce la seconda forma tiene la prima) */
.lp-tree ul li::before { content: '\251C\2500'; content: '\251C\2500' / ''; color: var(--ink-2); font-weight: 700; }
.lp-tree ul li:last-child::before { content: '\2514\2500'; content: '\2514\2500' / ''; }
.lp-tree .file { background: var(--bone); }
.lp-dir { font-weight: 700; }

/* ---------- 9. movimento ----------
   Riusa le animazioni della home (.rise, push-in dei titoli, numeri dei
   gesti, nastro, deriva del collage). In più: il prezzo della hero del
   catalogo si posa una volta al caricamento. Il contenuto è sempre
   visibile: le animazioni spostano e scalano, non nascondono. */

@media (prefers-reduced-motion: no-preference) {
  .lp-bhero .bundle-amount {
    animation: lp-stamp 560ms var(--ease-out) 120ms both;
    animation-timeline: auto;
    transform-origin: left bottom;
  }
  @supports (animation-timeline: view()) {
    .lp-sheet-md {
      animation: drift-slide linear both;
      animation-timeline: scroll(root block);
      animation-range: 0px 900px;
    }
    .lp-sheet-json {
      animation: drift-reel linear both;
      animation-timeline: scroll(root block);
      animation-range: 0px 900px;
    }
  }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 960px) {
  .lp-bhero .bundle-amount { transform-origin: right bottom; }
}
@keyframes lp-stamp {
  from { transform: scale(0.84) rotate(-3deg); }
  to { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-bhero .bundle-amount { animation: none; }
  .lp-sheet-md, .lp-sheet-json { animation: none; }
}