/* hopholm.com per le imprese (2026-10-14): si aggiunge a styles.css, che resta la base comune con /social.
   Stesse regole: carta e verde dell'olmo, un solo sole, fili da 1 px, niente ombre, Bricolage per i titoli. */

/* ---------- Apertura: le tre promesse nella metà «noi» ---------- */
.hero .pair {
  grid-template-rows: auto auto auto auto;
}
.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0 0 24px;
}
.hero-facts li {
  gap: 8px;
  font-size: 0.9rem;
  white-space: nowrap;
}
.hero-facts svg {
  width: 16px;
  height: 16px;
}
.motion .hero-facts svg path {
  transition-delay: 0ms;
}
.motion .hero-facts li:nth-child(2) svg path {
  transition-delay: 120ms;
}
.motion .hero-facts li:nth-child(3) svg path {
  transition-delay: 240ms;
}
.motion .hero.is-in .hero-facts svg path {
  stroke-dashoffset: 0;
}
.hero-text {
  margin: 18px 0 24px;
}
.hero .turn > :nth-child(3) {
  align-self: start;
}
.hero .turn.noi > .link-arrow {
  align-self: start;
}
.hero .btn-noi {
  display: none;
}

/* ---------- Vi riconoscete?: sei schede, il sole passa dal «prima» al «dopo» ---------- */
.pains {
  padding-top: clamp(88px, 11vw, 144px);
}
.pains-head {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: clamp(32px, 6vw, 96px);
  align-items: end;
}
.pains h2 {
  font-size: clamp(2.1rem, 3.8vw, 3.2rem);
  font-weight: 760;
  line-height: 1.02;
  letter-spacing: -0.032em;
}
.pains-head p {
  color: var(--ink-2);
  max-width: 46ch;
  font-size: 1.05rem;
}
.pains-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 48px 0 0;
  padding: 0;
}
/* Le due metà (oggi, con hopholm) si dividono solo sul telefono: qui i loro pezzi stanno nella griglia della scheda,
   con le due icone e il filo sulla prima riga. */
.pain {
  position: relative;
  display: grid;
  grid-template-columns: 54px 60px 54px 1fr;
  gap: 6px 0;
  align-content: start;
  padding: 22px 22px 24px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--white);
}
.pain-half {
  display: contents;
}
.pain-half > * {
  grid-column: 1 / -1;
}
.pain .tile-before {
  grid-area: 1 / 1;
}
.pain .pain-wire {
  grid-area: 1 / 2;
  align-self: center;
}
.pain .tile-after {
  grid-area: 1 / 3;
}
.pain .tile,
.pain .pain-wire {
  margin-bottom: 12px;
}
.pain-was,
.pain-num,
.deck-bar {
  display: none;
}
.tile {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 54px;
  height: 54px;
  border-radius: 14px;
}
.tile svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tile-before {
  background: var(--paper-2);
  color: var(--ink);
  transition: opacity 450ms ease;
}
/* la riga che cancella il «prima» */
.tile-before::after {
  content: '';
  position: absolute;
  left: 11px;
  top: 50%;
  width: 32px;
  height: 2px;
  margin-top: -1px;
  border-radius: 2px;
  background: var(--ink);
  transform: rotate(-38deg) scaleX(0);
  transform-origin: 0 50%;
  transition: transform 450ms var(--ease-out);
}
.pain.is-lit .tile-before {
  opacity: 0.45;
}
.pain.is-lit .tile-before::after {
  transform: rotate(-38deg) scaleX(1);
}
.pain-wire {
  position: relative;
  height: 0;
  margin: 0 8px;
  border-top: 1.5px dashed var(--field-stroke);
}
.pain-dot {
  position: absolute;
  top: -7px;
  left: -6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--sun);
  box-shadow: 0 0 0 4px rgb(242 182 50 / 0.22);
  opacity: 0;
}
.tile-after {
  background: var(--green);
  color: var(--on-green);
  transition: opacity 400ms ease;
}
.motion .pain:not(.is-lit) .tile-after {
  opacity: 0.35;
}
.pain-lab {
  margin-top: 2px;
  font: 700 0.7rem/1 var(--text);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.pain-lab-after {
  margin-top: 10px;
  color: var(--green);
}
.pain h3 {
  font: 700 1.1rem/1.3 var(--display);
  letter-spacing: -0.015em;
}
.pain p {
  color: var(--ink-2);
  font-size: 0.97rem;
}
.pains-more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 12px;
  margin-top: 28px;
  color: var(--ink-2);
}
.pains-more .link-arrow {
  color: var(--green);
}

/* ---------- Cosa costruiamo: tre colonne ---------- */
.band-three {
  grid-template-columns: 1fr 1fr 1fr;
  max-width: 1120px;
}
.band-three .band-col + .band-col {
  padding: 8px 0 8px var(--gut);
}
.band-three .band-col:nth-child(2) {
  padding-right: var(--gut);
}
.band-three h3 {
  font-size: 1.4rem;
}

/* Tabella dei lavori: gli stati si completano uno dopo l'altro */
.ill-tab {
  display: grid;
  align-content: center;
  gap: 9px;
  width: 190px;
  padding: 12px 14px;
  border: 1px solid var(--green-line);
  border-radius: 14px;
  background: rgb(242 244 240 / 0.05);
}
.tab-head {
  display: flex;
  gap: 6px;
  margin-bottom: 4px;
}
.tab-head span {
  width: 22px;
  height: 5px;
  border-radius: 3px;
  background: rgb(242 244 240 / 0.28);
}
.tab-head span:first-child {
  width: 40px;
}
.tab-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.tab-l {
  height: 6px;
  border-radius: 3px;
  background: rgb(242 244 240 / 0.3);
}
.tab-l.w9 {
  width: 76%;
}
.tab-l.w8 {
  width: 68%;
}
.tab-l.w7 {
  width: 58%;
}
.tab-l.w6 {
  width: 50%;
}
.tab-s {
  flex: none;
  width: 12px;
  height: 12px;
  border: 1.5px solid rgb(242 244 240 / 0.5);
  border-radius: 50%;
  transition:
    background-color 240ms ease,
    border-color 240ms ease;
}
.tab-row.is-done .tab-s {
  background: var(--sun);
  border-color: var(--sun);
}

/* Sito: una finestra che riceve una prenotazione */
.ill-site {
  display: grid;
  align-content: center;
}
.site-frame {
  position: relative;
  width: 200px;
  height: 128px;
  padding: 8px 10px;
  border: 1px solid var(--green-line);
  border-radius: 12px;
  background: rgb(242 244 240 / 0.05);
  overflow: hidden;
}
.site-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 10px;
}
.site-bar span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgb(242 244 240 / 0.35);
}
.site-url {
  width: 90px !important;
  height: 6px !important;
  margin-left: 6px;
  border-radius: 3px !important;
}
.site-hero {
  display: grid;
  gap: 6px;
  justify-items: start;
}
.site-h {
  width: 70%;
  height: 8px;
  border-radius: 4px;
  background: var(--on-green);
}
.site-h.short {
  width: 48%;
  height: 5px;
  background: rgb(242 244 240 / 0.35);
}
.site-btn {
  width: 48px;
  height: 14px;
  margin-top: 4px;
  border-radius: 5px;
  background: var(--sun);
}
.site-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 12px;
}
.site-cards span {
  height: 26px;
  border: 1px solid rgb(242 244 240 / 0.3);
  border-radius: 6px;
}
.site-toast {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border-radius: 8px;
  background: var(--paper);
  color: var(--green);
  font-size: 0.72rem;
  font-weight: 700;
  opacity: 0;
}
.site-toast svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Automazioni: tre passaggi, un filo, un punto che li percorre */
.ill-flow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 210px;
  padding: 0 4px;
}
.flow-wire {
  position: absolute;
  left: 26px;
  right: 26px;
  top: 50%;
  height: 1px;
  background: var(--green-line);
}
.flow-node {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgb(242 244 240 / 0.45);
  border-radius: 50%;
  background: var(--green);
  transition:
    border-color 240ms ease,
    background-color 240ms ease;
}
.flow-node svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--on-green);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.flow-node.is-on {
  border-color: var(--sun);
}
.flow-run {
  position: absolute;
  top: 50%;
  left: 0;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--sun);
  box-shadow: 0 0 0 4px rgb(242 182 50 / 0.25);
  opacity: 0;
}

/* ---------- Nessun rischio: il percorso col bivio ---------- */
.path {
  padding-top: clamp(88px, 11vw, 144px);
}
.path-head {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: clamp(32px, 6vw, 96px);
  align-items: end;
}
.path h2 {
  font-size: clamp(2.1rem, 3.8vw, 3.2rem);
  font-weight: 760;
  line-height: 1.02;
  letter-spacing: -0.032em;
}
.path-head p {
  color: var(--ink-2);
  max-width: 46ch;
  font-size: 1.05rem;
}
.path-board {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 1.1fr;
  grid-template-rows: auto auto;
  gap: 40px clamp(32px, 6vw, 96px);
  margin-top: 64px;
  padding: 8px 0 12px;
}
.path-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.path-track {
  fill: none;
  stroke: var(--line);
  stroke-width: 1;
}
.path-wire {
  fill: none;
  stroke: var(--green);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
html:not(.motion) .path-wire {
  stroke-dashoffset: 0;
}
.ps {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 4px;
  justify-items: start;
  padding-top: 32px;
}
.ps-a,
.ps-b {
  grid-row: 1 / 3;
  align-self: center;
}
.ps-c {
  grid-column: 3;
  grid-row: 1;
}
.ps-d {
  grid-column: 3;
  grid-row: 2;
}
.ps-dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  transition:
    background-color 260ms ease,
    border-color 260ms ease,
    box-shadow 260ms ease;
}
.ps.is-lit .ps-dot,
html:not(.motion) .ps-dot {
  background: var(--sun);
  border-color: var(--sun);
  box-shadow: 0 0 0 6px rgb(242 182 50 / 0.2);
}
.ps strong {
  font: 700 1.25rem/1.2 var(--display);
  letter-spacing: -0.02em;
}
.ps-price {
  font: 780 clamp(2rem, 3.4vw, 2.8rem) / 1 var(--display);
  letter-spacing: -0.035em;
  color: var(--green);
  font-variant-numeric: tabular-nums;
}
.ps-price-text {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
}
.ps small {
  font-size: 0.93rem;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 24ch;
}
.ps-a small,
.ps-b small {
  min-height: 3em;
}
.ps-c strong,
.ps-d strong {
  margin-top: 2px;
}
.ps-c {
  padding-top: 30px;
}
.path-sun {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: var(--sun);
  box-shadow: 0 0 0 7px rgb(242 182 50 / 0.2);
  opacity: 0;
  pointer-events: none;
}

/* ---------- Quanto costa: il conto ---------- */
.ledger {
  list-style: none;
  margin: 48px 0 0;
  padding: 0;
  border-top: 1px solid var(--ink);
}
.ledger-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px 40px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.ledger-what {
  display: grid;
  gap: 3px;
  max-width: 60ch;
}
.ledger-what strong {
  font: 700 1.25rem/1.25 var(--display);
  letter-spacing: -0.02em;
}
.ledger-what span {
  color: var(--ink-2);
  font-size: 0.97rem;
  line-height: 1.5;
}
.ledger-amount {
  justify-self: end;
  text-align: right;
  font: 780 clamp(1.9rem, 3vw, 2.6rem) / 1 var(--display);
  letter-spacing: -0.035em;
  color: var(--green);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ledger-text {
  display: grid;
  justify-items: end;
  gap: 4px;
  font-size: clamp(1.35rem, 2.1vw, 1.7rem);
}
.ledger-text small {
  font: 600 0.82rem/1 var(--text);
  letter-spacing: 0.01em;
  color: var(--ink-2);
}
/* Il contachilometri: ogni cifra è una colonna di dieci numeri che scorre fino a quello giusto */
.odo {
  display: inline-flex;
  align-items: flex-end;
  line-height: 1.05;
}
.odo-col {
  display: block;
  height: 1.05em;
  overflow: hidden;
}
.odo-stack {
  display: grid;
  will-change: transform;
}
.odo-stack span,
.odo-fix {
  display: block;
  height: 1.05em;
  line-height: 1.05;
}
.odo-fix {
  margin-left: 0.25em;
}

/* ---------- Servizio clienti ---------- */
.support {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
  padding-block: clamp(88px, 11vw, 144px);
}
.support h2 {
  font-size: clamp(2.1rem, 3.8vw, 3.2rem);
  font-weight: 760;
  line-height: 1.02;
  letter-spacing: -0.032em;
}
.support-lead {
  margin-top: 16px;
  color: var(--ink-2);
  max-width: 42ch;
  font-size: 1.05rem;
}
.sup-list {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  border-top: 1px solid var(--ink);
}
.sup-item {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 2px 0;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.sup-ico {
  grid-row: 1 / span 2;
  width: 22px;
  height: 22px;
  margin-top: 3px;
  fill: none;
  stroke: var(--green);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sup-item strong {
  grid-column: 2;
  font: 700 1.12rem/1.3 var(--display);
  letter-spacing: -0.015em;
}
.sup-item > span {
  grid-column: 2;
  color: var(--ink-2);
  font-size: 0.97rem;
}
.chat {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--white);
  overflow: hidden;
}
.chat-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  font-size: 0.9rem;
}
.chat-avatar {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--paper-2);
}
.chat-name {
  font-weight: 700;
}
.chat-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  color: var(--ink-2);
  font-weight: 600;
  font-size: 0.82rem;
}
.chat-body {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 330px;
  padding: 18px;
}
.msg {
  max-width: 86%;
  padding: 11px 15px;
  border-radius: 16px;
  font-size: 0.98rem;
  line-height: 1.45;
}
.msg.them {
  justify-self: start;
  background: var(--paper-2);
  color: var(--ink);
  border-bottom-left-radius: 5px;
}
.msg.us {
  justify-self: end;
  background: var(--green);
  color: var(--on-green);
  border-bottom-right-radius: 5px;
}
.msg-who {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--ink-2);
  letter-spacing: 0.01em;
}
.msg-who.us {
  justify-self: end;
}
.msg-tag {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--green);
  font-size: 0.78rem;
  font-weight: 700;
}
.msg-tag svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.typing {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 40px;
  padding: 0 16px;
  border-radius: 16px;
  border-bottom-right-radius: 5px;
  background: var(--green);
}
.typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--on-green-2);
  animation: typing 1s ease-in-out infinite;
}
.typing i:nth-child(2) {
  animation-delay: 0.15s;
}
.typing i:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes typing {
  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.55;
  }
  30% {
    transform: translateY(-4px);
    opacity: 1;
  }
}

/* ---------- Modulo: i due recapiti affiancati ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.contact legend {
  margin-bottom: 9px;
}

/* ---------- hopholm social, in fondo ---------- */
.social-teaser .apps-teaser-in {
  gap: 12px;
}
.brand-static {
  margin-bottom: 4px;
}
.brand-static > span:first-of-type {
  font-size: 1.2rem;
}
.teaser-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
}
.teaser-links .link-arrow {
  color: var(--green);
}

/* ---------- Piè di pagina a quattro colonne ---------- */
.page-home .foot-in {
  grid-template-columns: 4fr 3fr 3fr 3fr;
}

/* =====================================================================
   Telefono e tablet
   ===================================================================== */
@media (max-width: 899px) {
  /* Apertura sul telefono: la divisione del computer girata in verticale. Sopra, su carta, la vostra frase e il testo con
     gli esempi; sotto, un campo verde a tutta larghezza con la nostra, le promesse e il pulsante (Luca, 2026-10-20: il
     pulsante sotto la frase non gli piaceva, lì voleva il testo). Il sole sta sul confine e all'entrata il verde si apre
     da lì (main.js). I titoli prendono la larghezza del telefono: il limite è «semplifichiamo.», che deve stare in una riga. */
  .hero {
    padding-block: 28px 48px;
  }
  .hero-pair {
    display: block;
    padding-inline: 0;
  }
  .hero .turn {
    display: block;
  }
  .hero .turn.voi {
    position: relative;
    padding: 0 20px 40px;
  }
  .hero .turn.voi::after {
    content: '';
    position: absolute;
    left: 20px;
    bottom: -8px;
    z-index: 2;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--sun);
    box-shadow: 0 0 0 7px rgb(242 182 50 / 0.2);
  }
  .motion .hero .turn.voi::after {
    animation: sun-in 600ms var(--ease-out) 150ms backwards;
  }
  @keyframes sun-in {
    from {
      opacity: 0;
      transform: scale(0.4);
    }
    60% {
      transform: scale(1.2);
    }
  }
  .hero .turn.noi {
    padding: 40px 20px 44px;
    background: var(--green);
  }
  .intro .hero .turn.noi {
    clip-path: circle(0px at 28px 0px);
  }
  .hero-line {
    max-width: none;
    font-size: min(12vw, 3.4rem);
  }
  .hero .turn.noi .hero-line {
    color: var(--on-green);
  }
  .hero .turn.voi .hero-text {
    margin: 18px 0 0;
    font-size: 1rem;
  }
  .hero .turn.voi .btn {
    display: none;
  }
  .hero .btn-noi {
    display: flex;
    width: fit-content;
    margin-top: 28px;
    background: var(--paper);
    color: var(--ink);
  }
  .hero .turn.noi .link-arrow {
    display: flex;
    width: fit-content;
    margin-top: 22px;
  }
  .hero .turn.noi .hero-text {
    margin-top: 16px;
    color: var(--on-green-2);
    font-size: 1rem;
  }
  .hero-facts {
    gap: 6px 18px;
    margin: 20px 0 0;
  }
  .hero .link-arrow {
    color: var(--on-green);
  }
  .hero .noi :focus-visible {
    outline-color: var(--sun);
  }

  .pains {
    padding-top: 64px;
  }
  .pains-head {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  /* Il mazzo: una scheda alla volta, le altre impilate dietro. Davanti c'è il problema di oggi; poi dall'icona si apre
     un cerchio verde con la soluzione, e il problema resta in alto, barrato dal sole. Le posizioni le dà main.js con --o
     (0 davanti, 1 e 2 dietro, le altre nascoste) e --dx (lo spostamento col dito). */
  #contenuto {
    overflow-x: clip;
  }
  .pains-grid {
    display: grid;
    grid-template-columns: 1fr;
    max-width: 520px;
    margin-top: 28px;
    padding-bottom: 24px;
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
  }
  .pain {
    --e: min(var(--o, 0), 2);
    grid-area: 1 / 1;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    gap: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 16px;
    cursor: grab;
    transform-origin: 50% 100%;
    transform: translateY(calc(var(--e) * 12px)) scale(calc(1 - var(--e) * 0.05));
    opacity: clamp(0, 3 - var(--o, 0), 1);
    transition:
      transform 520ms var(--ease-out),
      opacity 300ms ease;
  }
  .pain.is-front {
    transform: translateX(calc(var(--dx, 0) * 1px)) rotate(calc(var(--dx, 0) * 0.03deg));
  }
  .pain.is-gone {
    opacity: 0;
    transition:
      transform 380ms var(--ease-out),
      opacity 380ms ease;
  }
  .is-dragging .pain,
  .pain.no-anim,
  .pain.no-anim * {
    transition: none !important;
  }
  .pain-half {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: start;
    padding: 24px;
    transition: opacity 240ms ease;
  }
  .pain:not(.is-front) .pain-half {
    opacity: 0;
  }
  .pain .pain-wire {
    display: none;
  }
  .pain-half .pain-lab {
    margin: 0 0 8px;
  }
  .pain-oggi .pain-lab,
  .pain-was {
    margin-top: auto;
  }
  .pain h3 {
    font-size: 1.45rem;
    line-height: 1.18;
    letter-spacing: -0.022em;
  }

  /* La soluzione: un cerchio verde che nasce dall'icona del «prima» (centro a 24 + 27 px) */
  .pain-dopo {
    background: var(--green);
    color: var(--on-green);
    clip-path: circle(0px at 51px 51px);
    transition:
      clip-path 420ms cubic-bezier(0.65, 0, 0.35, 1),
      opacity 240ms ease;
  }
  .pain.is-lit .pain-dopo {
    clip-path: circle(150% at 51px 51px);
    transition:
      clip-path 900ms cubic-bezier(0.65, 0, 0.35, 1) 180ms,
      opacity 240ms ease;
  }
  .pain-dopo > * {
    opacity: 0;
    transform: translateY(10px);
    transition:
      opacity 200ms ease,
      transform 200ms ease;
  }
  .pain-dopo > .tile-after {
    background: var(--green-line);
    transform: scale(0.9);
  }
  .pain.is-lit .pain-dopo > * {
    opacity: 1;
    transform: none;
    transition:
      opacity 450ms ease var(--d),
      transform 650ms var(--ease-out) var(--d);
  }
  .pain-dopo > :nth-child(1) {
    --d: 260ms;
  }
  .pain-dopo > :nth-child(2) {
    --d: 520ms;
  }
  .pain-dopo > :nth-child(3) {
    --d: 580ms;
  }
  .pain-dopo > :nth-child(4) {
    --d: 640ms;
  }
  .pain .pain-was {
    display: block;
    margin-bottom: 16px;
    color: var(--on-green-2);
    font-size: 0.95rem;
    line-height: 1.45;
  }
  .pain-was s {
    text-decoration: none;
    background: linear-gradient(var(--sun), var(--sun)) 0 58% / 0 1.5px no-repeat;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    transition: background-size 200ms ease;
  }
  .pain.is-lit .pain-was s {
    background-size: 100% 1.5px;
    transition: background-size 650ms var(--ease-out) 1050ms;
  }
  .pain-dopo .pain-lab {
    color: var(--on-green-2);
  }
  .pain-dopo > p:last-child {
    color: var(--on-green);
    font: 600 1.2rem/1.38 var(--display);
    letter-spacing: -0.012em;
  }
  /* Il numero della scheda, come in «Come funziona»: si accende di giallo sole quando arriva la soluzione */
  .pain .pain-num {
    display: grid;
    top: 33px;
    right: 24px;
    left: auto;
    margin: 0;
    transition:
      opacity 240ms ease,
      background-color 300ms ease,
      border-color 300ms ease;
  }
  .pain:not(.is-front) .pain-num {
    opacity: 0;
  }
  .pain.is-lit .pain-num {
    background: var(--sun);
    border-color: var(--sun);
    transition:
      opacity 240ms ease,
      background-color 300ms ease 760ms,
      border-color 300ms ease 760ms;
    animation: sun-pop 520ms var(--ease-out) 760ms;
  }
  @keyframes sun-pop {
    40% {
      transform: scale(1.22);
      box-shadow: 0 0 0 7px rgb(242 182 50 / 0.22);
    }
  }
  html:not(.motion) .pains-grid * {
    transition-delay: 0s !important;
  }

  /* Sotto il mazzo: a che scheda siete e le frecce */
  .deck-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 520px;
    margin-top: 12px;
  }
  .deck-dots {
    display: flex;
    gap: 6px;
    margin-right: auto;
  }
  .deck-dots span {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #b7bfb6;
    transition:
      width 260ms var(--ease-out),
      background-color 200ms ease;
  }
  .deck-dots .is-on {
    width: 22px;
    background: var(--green);
  }
  .deck-btn {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--white);
    color: var(--ink);
    cursor: pointer;
    transition: transform 160ms var(--ease-out);
  }
  .deck-btn:active {
    transform: scale(0.94);
  }
  .deck-btn svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .band-three {
    display: flex;
    flex-direction: column;
  }
  .band-three .band-col + .band-col,
  .band-three .band-col:nth-child(2) {
    padding: 32px 0 0;
  }

  .path {
    padding-top: 64px;
  }
  .path-head {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .path-board {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    gap: 36px 24px;
    margin-top: 44px;
  }
  .ps-a {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  .ps-b {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .ps-c {
    grid-column: 1;
    grid-row: 3;
    padding-top: 32px;
  }
  .ps-d {
    grid-column: 2;
    grid-row: 3;
  }
  .ps-a,
  .ps-b {
    align-self: start;
  }
  /* Sul telefono il punto sta a sinistra e il filo scende nella colonna vuota accanto ai testi */
  .ps,
  .ps-c {
    padding: 0 0 0 36px;
  }
  .ps-dot {
    top: 5px;
  }
  .ps-price {
    font-size: 1.9rem;
  }
  .ps-price-text {
    font-size: 1.25rem;
  }

  .ledger {
    margin-top: 32px;
  }
  .ledger-row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 18px 0;
  }
  .ledger-amount {
    justify-self: start;
    text-align: left;
    font-size: 1.7rem;
  }
  .ledger-text {
    justify-items: start;
    font-size: 1.25rem;
  }

  .support {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-block: 64px;
  }
  .chat-body {
    min-height: 300px;
  }

  .page-home .foot-in {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 599px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 420px) {
  .ill-tab,
  .ill-flow {
    width: 100%;
    max-width: 210px;
  }
}