@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-Variable.woff2') format('woff2'),
       url('../fonts/Satoshi-Variable.woff')  format('woff'),
       url('../fonts/Satoshi-Variable.ttf')   format('truetype');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-VariableItalic.woff2') format('woff2'),
       url('../fonts/Satoshi-VariableItalic.woff')  format('woff'),
       url('../fonts/Satoshi-VariableItalic.ttf')   format('truetype');
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}

/* ============================================================
   FIDELITY CARDS — PLAYFUL (final / standalone)
   Cartoon-bold amplified: more smiles, more color, more motion.
   Mobile-first responsive · scroll animations · stat counters
   tweakable: accent / density / hero-layout / shadow style
   ============================================================ */

:root {
  /* Brand palette */
  --fc-violet:   #A064FF;
  --fc-violet-2: #7820cc;
  --fc-magenta:  #FA00FF;
  --fc-orange:   #FF5429;
  --fc-yellow:   #EAC700;
  --fc-green:    #00C56A;
  --fc-black:    #0D0E10;
  --fc-paper:    #FAF8F4;

  --ink-100: #0D0E10;
  --ink-80:  rgba(13,14,16,0.78);
  --ink-60:  rgba(13,14,16,0.58);
  --ink-40:  rgba(13,14,16,0.38);
  --ink-20:  rgba(13,14,16,0.18);
  --ink-10:  rgba(13,14,16,0.10);

  /* Tweakable: accent (defaults violet) */
  --accent:        var(--fc-violet);
  --accent-on:     #ffffff;

  /* Tweakable: density */
  --d-section: clamp(88px, 11vw, 140px);    /* normal */
  --d-block:   clamp(48px, 6vw, 80px);

  /* Tweakable: shadow distance */
  --sh: 6px;
  --sh-soft: 0 14px 30px rgba(13,14,16,0.10);
  --sh-mode: hard;  /* hard | soft | none */

  /* Type */
  --r-card: 28px;
  --r-pill: 9999px;
}

/* Density modifiers (set on .play-root) */
.density-compact { --d-section: clamp(64px, 8vw, 96px); --d-block: clamp(32px, 4vw, 56px); }
.density-airy    { --d-section: clamp(120px, 14vw, 180px); --d-block: clamp(64px, 8vw, 104px); }

/* Shadow modifiers */
.shadow-hard .sh-cart { box-shadow: none; }
.shadow-soft .sh-cart { box-shadow: var(--sh-soft); border-color: rgba(13,14,16,0.08); }
.shadow-none .sh-cart { box-shadow: none; border-color: rgba(13,14,16,0.10); }
/* Carte prodotti: shadow piu leggera */
.shadow-hard .pcards .pcard.sh-cart { box-shadow: none; }
.shadow-hard .pcards .pcard.sh-cart:hover { transform: translate(-2px,-2px); }
/* Carte prodotti: stessa altezza */
.pcards { align-items: stretch; grid-auto-rows: 1fr; }
.pcards .pcard { display: flex; flex-direction: column; height: 100%; min-height: 320px; }
.pcards .pcard .pcard__body { flex: 1; }
.shadow-hard .sh-cart-violet { box-shadow: none; }
.shadow-soft .sh-cart-violet { box-shadow: 0 18px 40px rgba(160,100,255,0.18); }
.shadow-none .sh-cart-violet { box-shadow: none; }
.sh-btn { box-shadow: 4px 4px 0 var(--ink-100); }
.sh-btn:hover { box-shadow: 6px 6px 0 var(--ink-100); transform: translate(-2px,-2px); }
.sh-btn:active { box-shadow: 2px 2px 0 var(--ink-100); transform: translate(2px,2px); }
.shadow-soft .sh-btn { box-shadow: 0 6px 18px rgba(13,14,16,0.18); }
.shadow-soft .sh-btn:hover { box-shadow: 0 10px 24px rgba(13,14,16,0.22); transform: translateY(-2px); }
.shadow-none .sh-btn { box-shadow: none; }
.shadow-none .sh-btn:hover { transform: translateY(-2px); box-shadow: none; }
.shadow-hard .sh-cart:hover { transform: translate(-3px,-3px); }
.shadow-soft .sh-cart:hover { transform: translateY(-4px); box-shadow: 0 22px 50px rgba(13,14,16,0.14); }
.shadow-none .sh-cart:hover { transform: translateY(-3px); }

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Satoshi', system-ui, sans-serif;
  background: var(--fc-paper);
  color: var(--ink-100);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; }
mark { background: transparent; color: inherit; }

.container { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px); }

/* ============================================================
   PAGE BG — playful pattern
   ============================================================ */
.play-root {
  position: relative;
  background: var(--fc-paper);
  background-image:
    radial-gradient(circle at 20% 10%, rgba(160,100,255,0.07) 0, transparent 380px),
    radial-gradient(circle at 80% 60%, rgba(255,84,41,0.05) 0, transparent 420px);
}

/* ============================================================
   NAV
   ============================================================ */
.pnav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250,248,244,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 2.5px solid var(--ink-100);
}
.pnav__inner { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 28px; }
.pnav .pnav__links, .pnav .pnav__cta { display: none !important; }
.pnav .pnav__burger { display: inline-flex !important; align-items: center; justify-content: center; width: 44px; height: 44px; border: 2.5px solid var(--ink-100); border-radius: 12px; background: white; box-shadow: 3px 3px 0 var(--ink-100); }
.pnav__logo img { height: 36px; width: auto; }
.pnav__links { display: flex; gap: 4px; margin-left: 12px; }
.pnav__link {
  font-size: 0.92rem; font-weight: 600;
  padding: 8px 14px; border-radius: 999px;
  color: var(--ink-100);
  transition: background 140ms, color 140ms;
}
.pnav__link:hover { background: var(--fc-yellow); }
.pnav__link--faq { background: var(--fc-orange); color: white; border: 2.5px solid var(--ink-100); box-shadow: 3px 3px 0 var(--ink-100); padding: 8px 16px; transition: transform 120ms, box-shadow 120ms; }
.pnav__link--faq:hover { background: var(--fc-orange); transform: translate(-2px,-2px); box-shadow: 5px 5px 0 var(--ink-100); }
.pnav__cta { margin-left: auto; display: inline-flex; align-items: center; gap: 14px; }
.pnav__burger { display: none; }

/* Cartoon button */
.btn-cart {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent); color: var(--accent-on);
  font-weight: 700; font-size: 0.95rem;
  padding: 13px 24px; border-radius: 999px;
  border: 2.5px solid var(--ink-100);
  box-shadow: 4px 4px 0 var(--ink-100);
  transition: transform 120ms, box-shadow 120ms, background 160ms;
  white-space: nowrap;
}
.btn-cart:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--ink-100); }
.btn-cart:active { transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--ink-100); }
.btn-cart--yellow { background: var(--fc-yellow); color: var(--ink-100); }
.btn-cart--white  { background: white; color: var(--ink-100); }
.btn-cart--orange { background: var(--fc-orange); color: white; }
.btn-cart--ghost  { background: transparent; color: var(--ink-100); }

/* ============================================================
   HERO
   ============================================================ */
.phero {
  position: relative;
  padding: clamp(20px, 3vw, 36px) 0 clamp(56px, 8vw, 96px);
  overflow: hidden;
}
.phero__grid {
  display: grid; grid-template-columns: 1.05fr 1fr;
  gap: 48px; align-items: center;
  position: relative;
}
/* Hero layout tweaks */
.hero-left .phero__grid    { grid-template-columns: 1fr 1.05fr; direction: rtl; }
.hero-left .phero__grid > * { direction: ltr; }
.hero-center .phero__grid  { grid-template-columns: 1fr; text-align: center; gap: 56px; }
.hero-center .phero__lead  { margin-left: auto; margin-right: auto; }
.hero-center .phero__ctas  { justify-content: center; }
.hero-center .phero__pill  { margin-left: auto; margin-right: auto; }

.phero__pill {
  display: inline-block;
  background: var(--fc-yellow);
  border: 2px solid var(--ink-100);
  padding: 4px 10px; border-radius: 2px;
  font-size: 0.62rem; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase;
  margin-bottom: 22px;
  transform: rotate(-1.5deg);
  box-shadow: 3px 3px 0 var(--ink-100);
  color: var(--ink-100);
}
.phero__pill .dot { display: none; }
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 4px rgba(0,197,106,0.20); }
  50%      { box-shadow: 0 0 0 7px rgba(0,197,106,0.05); }
}
.phero__title {
  font-family: 'Satoshi', sans-serif; font-weight: 900;
  font-size: clamp(3.2rem, 9vw, 7.2rem);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  margin-bottom: 28px;
  text-wrap: balance;
}
.hl-violet, .hl-yellow, .hl-orange, .hl-magenta {
  padding: 0 12px; border-radius: 8px;
  display: inline-block;
  border: 2.5px solid var(--ink-100);
  box-shadow: 4px 4px 0 var(--ink-100);
}
.hl-violet  { background: var(--accent); color: white; transform: rotate(-1.5deg); }
.hl-yellow  { background: var(--fc-yellow); color: var(--ink-100); transform: rotate(1.5deg); }
.hl-orange  { background: var(--fc-orange); color: white; transform: rotate(-1deg); }
.hl-magenta { background: var(--fc-magenta); color: white; transform: rotate(1deg); }
.shadow-soft .hl-violet, .shadow-soft .hl-yellow, .shadow-soft .hl-orange, .shadow-soft .hl-magenta { box-shadow: 0 8px 18px rgba(13,14,16,0.18); }
.shadow-none .hl-violet, .shadow-none .hl-yellow, .shadow-none .hl-orange, .shadow-none .hl-magenta { box-shadow: none; transform: none; }

.phero__lead {
  font-size: 1.02rem; line-height: 1.5;
  color: var(--ink-80);
  max-width: 540px;
  margin-bottom: 32px;
}
.phero__ctas { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.phero__trust {
  font-size: 0.82rem; color: var(--ink-60);
  margin-top: 18px;
  display: flex; align-items: center; gap: 10px;
}
.phero__trust strong { color: var(--ink-100); }

/* HERO visual */
.phero__visual {
  position: relative;
  display: flex; justify-content: center; align-items: center;
  min-height: 480px;
}
.phero__phone {
  position: relative;
  max-width: 460px;
  width: 100%;
  z-index: 3;
  filter: drop-shadow(8px 12px 0 rgba(13,14,16,0.10));
  animation: phone-bob 6s ease-in-out infinite;
}
/* Hand-iPhone: taglio diagonale ~30deg parallelo al polso */
.phero__phone--v2 {
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 18% 100%, 0 100%);
          clip-path: polygon(0 0, 100% 0, 100% 90%, 18% 100%, 0 100%);
}
@keyframes phone-bob {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-12px) rotate(-1deg); }
}
.phero__blob {
  position: absolute;
  inset: 6% 8%;
  background: var(--fc-yellow);
  border-radius: 50%;
  z-index: 1;
  animation: blob-pulse 7s ease-in-out infinite;
}
.phero__blob--2 {
  position: absolute;
  width: 60%; height: 60%;
  inset: auto 4% 4% auto;
  background: var(--accent);
  opacity: 0.85;
  border-radius: 50%;
  z-index: 0;
  filter: blur(20px);
}
@keyframes blob-pulse {
  0%, 100% { transform: scale(1) rotate(0); }
  50%      { transform: scale(1.04) rotate(8deg); }
}
.phero__smile {
  position: absolute;
  z-index: 4;
  filter: drop-shadow(3px 3px 0 var(--ink-100));
}
.phero__smile--1 { top: 6%; left: -2%; width: 80px;  transform: rotate(-15deg); animation: bob-a 5.5s ease-in-out infinite; }
.phero__smile--2 { top: 0%;  right: -3%; width: 100px; transform: rotate(12deg);  animation: bob-b 6s ease-in-out infinite; }
.phero__smile--3 { bottom: 8%; left: -4%; width: 70px;  transform: rotate(8deg);   animation: bob-c 5s ease-in-out infinite; }
.phero__smile--4 { bottom: 4%; right: 4%;  width: 64px;  transform: rotate(-10deg); animation: bob-d 6.5s ease-in-out infinite; }
@keyframes bob-a { 0%,100% { transform: translateY(0) rotate(-15deg); } 50% { transform: translateY(-10px) rotate(-22deg); } }
@keyframes bob-b { 0%,100% { transform: translateY(0) rotate(12deg);  } 50% { transform: translateY(-12px) rotate(20deg); } }
@keyframes bob-c { 0%,100% { transform: translateY(0) rotate(8deg);   } 50% { transform: translateY(-8px)  rotate(2deg);  } }
@keyframes bob-d { 0%,100% { transform: translateY(0) rotate(-10deg); } 50% { transform: translateY(-8px)  rotate(-2deg); } }

/* Hero ribbon — moving stripe */
.phero__ribbon {
  position: relative;
  margin-top: clamp(40px, 6vw, 64px);
  background: var(--ink-100); color: var(--fc-paper);
  border-top: 2.5px solid var(--ink-100);
  border-bottom: 2.5px solid var(--ink-100);
  overflow: hidden;
  padding-top: 26px;
  padding-bottom: 7px;
  display: flex; align-items: center;
}
.phero__ribbon-track {
  display: flex; gap: 12px;
  width: max-content;
  /* !important per blindare l'animazione contro prefers-reduced-motion e contro
     eventuali regole legacy che disattivano l'animazione */
  animation: marquee 28s linear infinite !important;
  white-space: nowrap;
  font-family: 'Satoshi', sans-serif; font-weight: 900;
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.phero__ribbon-track .phero__ribbon-group { display: inline-flex; align-items: center; gap: 12px; }
.phero__ribbon-track .phero__pill {
  display: inline-flex; align-items: center;
  padding: 10px 18px;
  border: 2.5px solid var(--ink-100);
  border-radius: 9999px;
  background: var(--fc-paper);
  color: var(--ink-100);
  font-family: 'Satoshi', sans-serif;
  font-weight: 700;
  font-size: 0.95em;
  letter-spacing: -0.005em;
  text-transform: none;
  white-space: nowrap;
  box-shadow: 3px 3px 0 var(--ink-100);
  transform: none !important;
  vertical-align: middle;
  flex: 0 0 auto;
}
.phero__ribbon-track .phero__pill--violet  { background: var(--fc-violet); color: #fff; }
.phero__ribbon-track .phero__pill--orange  { background: var(--fc-orange); color: #fff; }
.phero__ribbon-track .phero__pill--magenta { background: var(--fc-magenta); color: #fff; }
.phero__ribbon-track .phero__pill--yellow  { background: var(--fc-yellow); color: var(--ink-100); }
.phero__ribbon-track .phero__pill--green   { background: var(--fc-green); color: #fff; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============================================================
   KPI
   ============================================================ */
.pkpi {
  background: var(--ink-100); color: var(--fc-paper);
  padding: clamp(56px, 7vw, 88px) 0;
  border-top: 3px solid var(--ink-100);
  border-bottom: 3px solid var(--ink-100);
  position: relative;
  overflow: hidden;
}
.pkpi::before { display: none; }
.pkpi--duo .pkpi__grid--duo { grid-template-columns: repeat(2, 1fr); max-width: 720px; margin: 0 auto; }

/* === KPI DUO — desktop layout (PC only, mobile <=640px non toccato) === */
@media (min-width: 641px) {
  .pkpi--duo .pkpi__grid--duo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 1040px;
    gap: clamp(40px, 6vw, 96px);
    align-items: start;
    justify-items: center;
    padding: 0 clamp(24px, 4vw, 64px);
  }
  .pkpi--duo .pkpi__cell {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 420px;
  }
  .pkpi--duo .pkpi__num {
    white-space: nowrap;
    font-size: clamp(4rem, 8vw, 7rem);
    line-height: 1;
    margin-bottom: 18px;
  }
  .pkpi--duo .pkpi__lbl {
    text-align: center;
    max-width: 320px;
    margin: 0 auto;
  }
}
.pkpi__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  position: relative;
}
.pkpi__cell { position: relative; }
.pkpi__num {
  font-family: 'Satoshi', sans-serif; font-weight: 900;
  font-size: clamp(4.5rem, 9vw, 8rem);
  line-height: 0.95;
  margin-bottom: 12px;
  font-variant-numeric: tabular-nums;
}
.pkpi__cell:nth-child(1) .pkpi__num { color: var(--fc-yellow); }
.pkpi__cell:nth-child(2) .pkpi__num { color: var(--accent); }
.pkpi__cell:nth-child(3) .pkpi__num { color: var(--fc-orange); }
.pkpi__cell:nth-child(4) .pkpi__num { color: var(--fc-magenta); }
.pkpi__lbl { color: rgba(248,248,248,0.78); font-size: clamp(1.05rem, 1.4vw, 1.35rem); line-height: 1.45; max-width: 320px; font-weight: 500; }

/* ============================================================
   SECTIONS
   ============================================================ */
.psec {
  padding: var(--d-section) 0;
  position: relative;
}
.psec--violet { background: var(--accent); color: white; }
.psec--paper  { background: var(--fc-paper); }
.psec--ink    { background: var(--ink-100); color: var(--fc-paper); }

.psec__head {
  text-align: center;
  max-width: 820px;
  margin: 0 auto var(--d-block);
}
.psec__pill {
  display: inline-block;
  background: var(--fc-yellow);
  border: 2px solid var(--ink-100);
  padding: 6px 14px; border-radius: 2px;
  font-size: 0.78rem; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-100);
  margin-bottom: 24px;
  transform: rotate(-1.5deg);
  box-shadow: 3px 3px 0 var(--ink-100);
}
.psec__pill .dot { display: none; }
.psec__title {
  font-family: 'Satoshi', sans-serif; font-weight: 900;
  font-size: clamp(2.4rem, 6vw, 4.8rem);
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  margin-bottom: 20px;
  text-wrap: balance;
}
.psec__lead {
  font-size: 1.1rem; line-height: 1.6;
  max-width: 620px;
  margin: 0 auto;
  opacity: 0.85;
}

/* ============================================================
   STEPS — cartoon cards
   ============================================================ */
.pstep-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  position: relative;
}
.pstep {
  background: white;
  border: 2.5px solid var(--ink-100);
  border-radius: var(--r-card);
  padding: 36px 28px;
  position: relative;
  transition: transform 260ms cubic-bezier(.2,.8,.2,1), box-shadow 260ms;
}
.pstep__badge {
  position: absolute;
  top: -18px; left: 24px;
  background: var(--accent); color: white;
  border: 2.5px solid var(--ink-100);
  border-radius: 999px;
  padding: 6px 16px;
  font-family: 'Satoshi', sans-serif; font-weight: 900;
  font-size: 1rem;
  letter-spacing: 0.04em;
}
.pstep:nth-child(1) .pstep__badge { background: var(--accent); }
.pstep:nth-child(2) .pstep__badge { background: var(--fc-orange); }
.pstep:nth-child(3) .pstep__badge { background: var(--fc-yellow); color: var(--ink-100); }

.pstep__visual {
  margin: 12px -8px 24px;
  aspect-ratio: 4/3;
  background: var(--fc-paper);
  border-radius: 18px;
  border: 2px solid var(--ink-100);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  position: relative;
}
.pstep:nth-child(2) .pstep__visual { background: rgba(255,84,41,0.08); }
.pstep:nth-child(3) .pstep__visual { background: rgba(234,199,0,0.14); }
.pstep:nth-child(3) .pstep__visual img { object-position: 0% center; }
.pstep__visual img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 14px;
  transition: transform 360ms cubic-bezier(.2,.8,.2,1);
}
.pstep:hover .pstep__visual img { transform: scale(1.06) rotate(-2deg); }

.pstep__title {
  font-family: 'Satoshi', sans-serif; font-weight: 900;
  font-size: 1.7rem;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  margin-bottom: 12px;
  line-height: 1;
}
.pstep__body { color: var(--ink-80); font-size: 0.95rem; line-height: 1.6; }
.pstep__smile {
  position: absolute;
  width: 44px;
  top: -20px; right: -16px;
  transform: rotate(15deg);
  filter: drop-shadow(2px 2px 0 var(--ink-100));
  pointer-events: none;
  opacity: 0;
  transition: opacity 240ms, transform 360ms cubic-bezier(.34,1.56,.64,1);
}
.pstep:hover .pstep__smile { opacity: 1; transform: rotate(15deg) scale(1.15); }

/* ============================================================
   PRODUCT CARDS
   ============================================================ */
.pcards {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.pcard {
  border: 2.5px solid var(--ink-100);
  border-radius: var(--r-card);
  padding: 20px 16px 20px;
  transition: transform 260ms cubic-bezier(.2,.8,.2,1), box-shadow 260ms;
  display: flex; flex-direction: column;
  color: var(--ink-100);
  position: relative;
  overflow: visible;
}
.pcard::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 90% -10%, rgba(255,255,255,0.4) 0, transparent 50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 260ms;
}
.pcard:hover::after { opacity: 1; }
.pcard--timbri { background: #C5A4FF; }
.pcard--punti  { background: #FF8B6E; }
.pcard--coupon { background: var(--fc-yellow); }

/* Card badge — stesso stile di .pstep__badge (sezione "Come funziona") */
.pcard__badge {
  position: absolute;
  top: -18px; left: 24px;
  background: var(--accent); color: white;
  border: 2.5px solid var(--ink-100);
  border-radius: 999px;
  padding: 6px 16px;
  font-family: 'Satoshi', sans-serif; font-weight: 900;
  font-size: 1rem;
  letter-spacing: 0.04em;
  z-index: 5;
  box-shadow: 3px 3px 0 var(--ink-100);
}
.pcard:nth-child(1) .pcard__badge { background: var(--accent); }
.pcard:nth-child(2) .pcard__badge { background: var(--fc-orange); }
.pcard:nth-child(3) .pcard__badge { background: var(--fc-yellow); color: var(--ink-100); }

/* Legacy .pcard__num — manteniamo solo per retrocompatibilità di altre direzioni */
.pcard__num {
  position: absolute;
  top: -18px; left: 24px;
  background: var(--accent); color: white;
  border: 2.5px solid var(--ink-100);
  border-radius: 999px;
  padding: 6px 16px;
  font-family: 'Satoshi', sans-serif; font-weight: 900;
  font-size: 1rem;
  letter-spacing: 0.04em;
  z-index: 2;
}
.pcard:nth-child(1) .pcard__num { background: var(--accent); }
.pcard:nth-child(2) .pcard__num { background: var(--fc-orange); }
.pcard:nth-child(3) .pcard__num { background: var(--fc-yellow); color: var(--ink-100); }

.pcard__visual {
  background: white;
  border: 2px solid var(--ink-100);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 16px;
  display: flex; align-items: center; justify-content: center;
  height: 180px;
  position: relative;
  overflow: hidden;
  transition: transform 280ms cubic-bezier(.2,.8,.2,1);
}
.pcard:hover .pcard__visual { transform: translateY(-4px) rotate(-1deg); }
.pcard__visual img {
  width: auto;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 10px;
  filter: drop-shadow(0 6px 12px rgba(13,14,16,0.18));
  transition: transform 360ms cubic-bezier(.2,.8,.2,1);
}
.pcard:hover .pcard__visual img { transform: scale(1.05) rotate(2deg); }
.pcard__title {
  font-family: 'Satoshi', sans-serif; font-weight: 900;
  font-size: 2.6rem;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 14px;
}
.pcard__body { font-size: 1rem; line-height: 1.6; margin-bottom: 28px; flex: 1; }
.pcard__cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ink-100); color: white;
  padding: 12px 18px; border-radius: 999px;
  font-weight: 700; font-size: 0.88rem;
  align-self: flex-start;
  transition: gap 200ms, background 200ms;
}
.pcard__cta:hover { gap: 14px; }
.pcard__cta-arrow { transition: transform 200ms; }
.pcard:hover .pcard__cta-arrow { transform: translateX(4px); }

.pcards__more {
  text-align: center;
  margin-top: 40px;
}
.pcards__more span {
  display: inline-block;
  font-family: 'Satoshi', sans-serif; font-weight: 900;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  text-transform: uppercase;
  color: var(--ink-100);
  letter-spacing: 0.01em;
  transform: rotate(-2deg);
  cursor: default;
  user-select: none;
}

/* Floating sticker on card */
.pcard__sticker {
  position: absolute;
  top: -10px; right: -10px;
  background: var(--ink-100); color: white;
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 0.85rem; font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: rotate(8deg);
  border: 2px solid var(--ink-100);
  z-index: 5;
  box-shadow: 3px 3px 0 var(--ink-100);
}

/* ============================================================
   NOTIFICHE — opzione 3: trigger per soglia (rows alternate)
   ============================================================ */
.pnotif-sec { overflow: hidden; position: relative; }
.pnotif-sec__smile {
  position: absolute;
  filter: drop-shadow(3px 3px 0 var(--ink-100));
  z-index: 1;
  pointer-events: none;
}
.pnotif-sec__smile--1 { width: 56px; top: 2%;   left: 1%;   transform: rotate(-18deg); animation: bob-a 6s ease-in-out infinite; }
.pnotif-sec__smile--2 { width: 50px; top: 6%;   right: 1%;  transform: rotate(14deg);  animation: bob-b 7s ease-in-out infinite; }
.pnotif-sec__smile--3 { width: 44px; top: 22%;  right: 0.5%;transform: rotate(-10deg); animation: bob-c 5.5s ease-in-out infinite; }
.pnotif-sec__smile--4 { width: 52px; top: 2%; left: 4%; transform: rotate(8deg);   animation: bob-d 6.5s ease-in-out infinite; }
.pnotif-sec__smile--5 { width: 46px; top: 52%;  right: 1%;  transform: rotate(-12deg); animation: bob-a 5.5s ease-in-out infinite; }
.pnotif-sec__smile--6 { width: 42px; top: 66%;  left: 1%;   transform: rotate(16deg);  animation: bob-b 6s ease-in-out infinite; }
.pnotif-sec__smile--7 { width: 50px; top: 80%;  right: 0.5%;transform: rotate(-14deg); animation: bob-c 7s ease-in-out infinite; }
.pnotif-sec__smile--8 { width: 44px; bottom: 2%;left: 1%;   transform: rotate(10deg);  animation: bob-d 5s ease-in-out infinite; }
.pnotif-head { max-width: 720px; margin: 0 auto 24px; text-align: center; position: relative; z-index: 2; }
.pnotif-head .pnotif__title { margin-left: auto; margin-right: auto; }
.pnotif-head .pnotif__lead { margin-left: auto; margin-right: auto; }

.pnotif-list { display: flex; flex-direction: column; gap: clamp(24px, 3vw, 40px); max-width: 1080px; margin: 0 auto; }
.pnotif-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px;
  align-items: center;
}
.pnotif-row:nth-child(even) > .pnotif-row__visual { order: 2; }

.pnotif-row__visual {
  display: flex; justify-content: center;
  opacity: 0;
  transform: scale(0.7) rotate(-4deg);
  transition: opacity 600ms cubic-bezier(.34,1.56,.64,1), transform 800ms cubic-bezier(.34,1.56,.64,1);
}
.pnotif-row__visual--r { transform: scale(0.7) rotate(4deg); }
.pnotif-row__visual.is-in { opacity: 1; transform: scale(1) rotate(-2deg); }
.pnotif-row__visual--r.is-in { transform: scale(1) rotate(2deg); }
.pnotif-row__visual img {
  width: 100%; max-width: 340px;
  aspect-ratio: 4 / 4.05;
  object-fit: cover;
  object-position: top center;
  border-radius: 22px;
  border: 2.5px solid var(--ink-100);
  background: white;
}

.pnotif-row__caption { color: white; }
.pnotif-row__caption strong {
  font-family: 'Satoshi', sans-serif; font-weight: 900;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  text-transform: uppercase;
  display: block; margin-bottom: 14px;
  line-height: 1;
  color: var(--fc-yellow);
}
.pnotif-row__caption p {
  color: rgba(255,255,255,0.9);
  font-size: 1.05rem; line-height: 1.65;
  max-width: 440px;
}

@media (max-width: 880px) {
  .pnotif-row { grid-template-columns: 1fr; gap: 28px; text-align: center; }
  .pnotif-row:nth-child(even) > .pnotif-row__visual { order: 0; }
  .pnotif-row__caption p { margin-left: auto; margin-right: auto; }
}
.pnotif {
  display: grid; grid-template-columns: 1fr 1.05fr;
  gap: 64px; align-items: center;
}
.pnotif__title {
  font-family: 'Satoshi', sans-serif; font-weight: 900;
  font-size: clamp(2.4rem, 5.5vw, 4.4rem);
  line-height: 0.95;
  text-transform: uppercase;
  margin-bottom: 24px;
  text-wrap: balance;
  color: white;
}
.pnotif__title mark {
  background: var(--fc-yellow); color: var(--ink-100);
  padding: 0 10px; border-radius: 8px;
  border: 2.5px solid var(--ink-100);
  display: inline-block;
  transform: rotate(-1deg);
  box-shadow: 4px 4px 0 var(--ink-100);
}
.pnotif__lead {
  font-size: 1.05rem; line-height: 1.65;
  color: rgba(255,255,255,0.92);
  margin-bottom: 32px;
  max-width: 480px;
}
.pnotif__list { display: flex; flex-direction: column; gap: 14px; max-width: 520px; }
.pnotif__msg {
  background: white; color: var(--ink-100);
  border: 2.5px solid var(--ink-100);
  border-radius: 18px;
  padding: 16px 20px;
  display: flex; gap: 14px;
  transition: transform 220ms, box-shadow 220ms;
}
.pnotif__msg:hover { transform: translate(-2px,-2px); }
.pnotif__msg-icon {
  width: 40px; height: 40px;
  background: var(--accent); color: white;
  border-radius: 10px;
  border: 2px solid var(--ink-100);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Satoshi', sans-serif; font-weight: 900;
  flex-shrink: 0;
  font-size: 0.95rem;
}
.pnotif__msg:nth-child(2) .pnotif__msg-icon { background: var(--fc-orange); }
.pnotif__msg:nth-child(3) .pnotif__msg-icon { background: var(--fc-magenta); }
.pnotif__msg-title { font-weight: 700; font-size: 0.95rem; margin-bottom: 4px; }
.pnotif__msg-body { color: var(--ink-80); font-size: 0.88rem; line-height: 1.5; }

.pnotif__phone {
  position: relative;
  display: flex; justify-content: center;
  height: 620px;
  align-items: center;
}
.pnotif__phone img:not(.pnotif__phone-smile) {
  position: absolute;
  width: 280px;
  border-radius: 22px;
  box-shadow: 6px 6px 0 var(--ink-100);
  border: 2.5px solid var(--ink-100);
  transition: transform 320ms cubic-bezier(.2,.8,.2,1);
}
.pnotif__phone .pnotif__n--1 { --notif-t: translate(-140px, -140px) rotate(-9deg); transform: var(--notif-t); z-index: 1; }
.pnotif__phone .pnotif__n--2 { --notif-t: translate(-70px, -60px) rotate(-3deg); transform: var(--notif-t); z-index: 2; }
.pnotif__phone .pnotif__n--3 { --notif-t: translate(0, 0) rotate(0deg); transform: var(--notif-t); z-index: 5; }
.pnotif__phone .pnotif__n--4 { --notif-t: translate(70px, 60px) rotate(3deg); transform: var(--notif-t); z-index: 4; }
.pnotif__phone .pnotif__n--5 { --notif-t: translate(140px, 140px) rotate(9deg); transform: var(--notif-t); z-index: 3; }
.pnotif__phone:hover .pnotif__n--1 { --notif-t: translate(-160px, -150px) rotate(-11deg); }
.pnotif__phone:hover .pnotif__n--5 { --notif-t: translate(160px, 150px) rotate(11deg); }
.pnotif__phone-smile {
  position: absolute;
  width: 44px;
  z-index: 4;
  filter: drop-shadow(3px 3px 0 var(--ink-100));
}
.pnotif__phone-smile--a { top: 4%; right: 10%; width: 44px; transform: rotate(15deg); animation: bob-b 5s ease-in-out infinite; }
.pnotif__phone-smile--b { bottom: 6%; left: 6%; width: 38px; transform: rotate(-12deg); animation: bob-a 6s ease-in-out infinite; }

/* Notifiche staggered pop-in */
.pnotif__n { opacity: 0; }
.pnotif__phone.is-in .pnotif__n { animation: notif-pop 700ms cubic-bezier(.34,1.56,.64,1) forwards; }
.pnotif__phone.is-in .pnotif__n--1 { animation-delay: 0ms; }
.pnotif__phone.is-in .pnotif__n--2 { animation-delay: 180ms; }
.pnotif__phone.is-in .pnotif__n--3 { animation-delay: 360ms; }
.pnotif__phone.is-in .pnotif__n--4 { animation-delay: 540ms; }
.pnotif__phone.is-in .pnotif__n--5 { animation-delay: 720ms; }
@keyframes notif-pop {
  0%   { opacity: 0; transform: var(--notif-t, translate(0,0) rotate(0)) scale(0.7); }
  60%  { opacity: 1; transform: var(--notif-t, translate(0,0) rotate(0)) scale(1.05); }
  100% { opacity: 1; transform: var(--notif-t, translate(0,0) rotate(0)) scale(1); }
}

/* ============================================================
   WALLET STRIP
   ============================================================ */
.pwallet-wrap { padding: var(--d-section) 0; }
.pwallet {
  background: var(--ink-100); color: var(--fc-paper);
  border-radius: 32px;
  margin: 0 clamp(20px, 4vw, 56px);
  padding: clamp(56px, 7vw, 88px);
  border: 3px solid var(--ink-100);
  position: relative;
  overflow: hidden;
}
@media (min-width: 1025px) {
  .pwallet > .pwallet__grid { width: 100%; }
}
.pwallet::after {
  content: '';
  position: absolute;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(160,100,255,0.32), transparent 70%);
  bottom: -100px; left: -80px;
  pointer-events: none;
}
.pwallet__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 56px; align-items: start; position: relative; z-index: 1; }
@media (max-width: 1024px) { .pwallet__grid { grid-template-columns: 1fr; } .pwallet__phone { order: 2; } }
.pwallet__title {
  font-family: 'Satoshi', sans-serif; font-weight: 900;
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  line-height: 0.95;
  text-transform: uppercase;
  margin-bottom: 24px;
}
.pwallet__title mark { background: var(--fc-yellow); color: var(--ink-100); padding: 0 10px; border-radius: 8px; display: inline-block; transform: rotate(-1deg); border: 2.5px solid var(--ink-100); box-shadow: 4px 4px 0 var(--accent); }
.pwallet__lead { color: rgba(248,248,248,0.78); font-size: 1.05rem; line-height: 1.6; margin-bottom: 32px; max-width: 460px; }
.pwallet__chips { display: flex; gap: 12px; flex-wrap: wrap; }
.pwallet__chip {
  box-shadow: 4px 4px 0 var(--ink-100);
  display: inline-flex; align-items: center; gap: 10px;
  background: white; color: var(--ink-100);
  padding: 14px 22px 14px 30px;
  border-radius: 12px;
  font-weight: 700;
  border: 2.5px solid var(--ink-100);
  position: relative;
}
.pwallet__chip::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 14px;
  background: var(--fc-yellow);
  border-right: 2.5px solid var(--ink-100);
  border-top-left-radius: 9px;
  border-bottom-left-radius: 9px;
}
.pwallet__chip:hover { box-shadow: 4px 4px 0 var(--ink-100); }
.pwallet__phone { display: flex; justify-content: center; align-items: center; position: relative; }
.pwallet__phone img { max-width: 300px; width: 100%; border-radius: 18px; border: 2.5px solid var(--ink-100); box-shadow: 6px 6px 0 var(--ink-100); display: block; }
.pwallet__phone video { max-width: 300px; width: 100%; display: block; background: transparent; border-radius: 24px; border: none; box-shadow: none; }

/* Smile agli angoli del riquadro nero .pwallet (non sul video) */
.pwallet__corner-smile {
  position: absolute;
  width: 52px;
  filter: drop-shadow(2px 2px 0 var(--ink-100));
  z-index: 2;
  pointer-events: none;
}
.pwallet__corner-smile--tl { top: 8%;     left: 5%;     transform: rotate(-22deg); animation: bob-a 5.5s ease-in-out infinite; }
.pwallet__corner-smile--tr { top: 12%;    right: 7%;    transform: rotate(18deg);  animation: bob-b 6s ease-in-out infinite; }
.pwallet__corner-smile--bl { bottom: 4%;  left: 2%;     transform: rotate(8deg);   animation: bob-c 5s ease-in-out infinite; }
.pwallet__corner-smile--br { bottom: 6%;  right: 4%;    transform: rotate(-16deg); animation: bob-d 6.5s ease-in-out infinite; }

/* ============================================================
   BACKED BY (logos placeholder)
   ============================================================ */
.pbacked {
  padding: clamp(48px, 6vw, 72px) 0;
  background: var(--fc-paper);
  border-top: 2.5px solid var(--ink-100);
  border-bottom: 2.5px solid var(--ink-100);
}
.pbacked__label {
  text-align: center;
  font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 800;
  font-family: 'Satoshi', sans-serif; font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-100);
  margin-bottom: 16px;
  line-height: 1.05;
}
.pbacked__hl { display: inline-block; background: var(--fc-yellow); padding: 6px 18px; border: 2.5px solid var(--ink-100); border-radius: 8px; box-shadow: 3px 3px 0 var(--ink-100); transform: rotate(-1deg); margin-right: 8px; font-size: 1.1em; }
.pbacked__row {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 32px; align-items: center;
}
.pbacked__logo {
  display: flex; align-items: center; justify-content: center;
  height: 56px;
  font-family: 'Satoshi', sans-serif; font-weight: 900;
  font-size: 1.4rem;
  letter-spacing: 0.04em;
  color: var(--ink-100);
  opacity: 0.65;
  transition: opacity 200ms, transform 200ms;
  text-transform: uppercase;
}
.pbacked__logo:hover { opacity: 1; transform: translateY(-2px); }
.pbacked__logo .dot { display: inline-block; width: 10px; height: 10px; background: var(--accent); border-radius: 50%; margin-right: 8px; }

/* Logo carousel (real client logos) */
.pbacked-carousel {
  width: 100%;
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.pbacked-carousel__track {
  display: flex;
  gap: 24px;
  width: max-content;
  animation: pbacked-scroll 28s linear infinite;
  padding: 8px 0;
}
.pbacked-carousel:hover .pbacked-carousel__track { animation-play-state: paused; }
.pbacked-badge {
  flex: 0 0 auto;
  width: 88px; height: 88px;
  border-radius: 50%;
  border: 2.5px solid var(--ink-100);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  transition: transform 200ms;
}
.pbacked-badge:hover { transform: translateY(-3px) rotate(-3deg); }
.pbacked-badge img {
  width: 86%; height: 86%;
  object-fit: contain;
}
@keyframes pbacked-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (max-width: 640px) {
  .pbacked-badge { width: 64px; height: 64px; }
  .pbacked-carousel__track { gap: 16px; animation-duration: 22s; }
}

/* ============================================================
   VALORI
   ============================================================ */
.pvalues {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.pvalue {
  background: white;
  border: 2.5px solid var(--ink-100);
  border-radius: var(--r-card);
  padding: 36px 28px;
  transition: transform 260ms cubic-bezier(.2,.8,.2,1), box-shadow 260ms;
  position: relative;
}
.pvalue__icon {
  width: 72px; height: 72px;
  margin-bottom: 24px;
  display: flex; align-items: center; justify-content: center;
  background: var(--fc-yellow);
  border: 2.5px solid var(--ink-100);
  border-radius: 18px;
  box-shadow: 4px 4px 0 var(--ink-100);
  transition: transform 240ms;
}
.pvalue:hover .pvalue__icon { transform: rotate(-8deg) scale(1.06); }
.pvalue:nth-child(2) .pvalue__icon { background: var(--accent); }
.pvalue:nth-child(3) .pvalue__icon { background: var(--fc-orange); }
.pvalue__icon img { width: 60%; height: 60%; object-fit: contain; }
.pvalue__title {
  font-family: 'Satoshi', sans-serif; font-weight: 900;
  font-size: 1.85rem;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 12px;
  letter-spacing: -0.005em;
}
.pvalue__body { color: var(--ink-80); font-size: 0.96rem; line-height: 1.6; }

/* Inline values layout: icon on the right, title on the left */
.pvalues--inline { gap: 18px; }
.pvalue--inline { padding: 22px 22px; }
.pvalue--inline .pvalue__row { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.pvalue--inline .pvalue__icon { width: 56px; height: 56px; margin-bottom: 0; border-radius: 14px; flex-shrink: 0; }
.pvalue--inline .pvalue__title { margin-bottom: 0; font-size: 1.7rem; }
.pvalue--inline .pvalue__body { font-size: 0.92rem; }

/* ============================================================
   NOTIF CAROUSEL
   ============================================================ */
.pnotif-car { max-width: 720px; margin: 0 auto; position: relative; }
.pnotif-car__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  gap: 0;
}
.pnotif-car__track::-webkit-scrollbar { display: none; }
.pnotif-car__slide {
  scroll-snap-align: center;
  scroll-snap-stop: always;
  display: flex; flex-direction: column; align-items: center;
  padding: 8px 14px 8px;
  gap: 14px;
  text-align: center;
}
.pnotif-car__caption { color: white; max-width: 460px; margin-bottom: 28px; }
.pnotif-car__visual { width: 100%; display: flex; justify-content: center; }
.pnotif-car__visual img {
  width: 100%; max-width: 320px;
  aspect-ratio: 4 / 4.05;
  object-fit: cover; object-position: top center;
  border-radius: 22px;
  border: 2.5px solid var(--ink-100);
  background: white;
}
.pnotif-car__caption { color: white; max-width: 460px; }
.pnotif-car__caption strong {
  font-family: 'Satoshi', sans-serif; font-weight: 900;
  font-size: clamp(1.6rem, 6vw, 2.2rem);
  text-transform: uppercase;
  display: block; margin-bottom: 12px; line-height: 1;
  color: var(--fc-yellow);
}
.pnotif-car__caption p { color: rgba(255,255,255,0.92); font-size: 1rem; line-height: 1.6; }
.pnotif-car__dots { display: flex; gap: 10px; justify-content: center; margin-top: 14px; }
.pnotif-car__dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: rgba(255,255,255,0.35);
  border: 2px solid var(--ink-100);
  padding: 0; cursor: pointer;
  transition: background 180ms, transform 180ms;
}
.pnotif-car__dot.is-active { background: var(--fc-yellow); transform: scale(1.2); }

/* ============================================================
   CTA simple (no smiles, no lead)
   ============================================================ */
.pcta--simple .pcta__title { margin-bottom: 36px; }
.pcta__btn--sm {
  font-size: 0.95rem;
  padding: 12px 24px;
}
.pcta__btn--big {
  font-size: clamp(1.1rem, 4vw, 1.4rem);
  padding: 20px 36px;
  border-radius: 999px;
}

/* ============================================================
   FAQ TEASER
   ============================================================ */
.pfaq__list { display: flex; flex-direction: column; gap: 14px; max-width: 880px; margin: 0 auto; }
.pfaq__item {
  background: white;
  border: 2.5px solid var(--ink-100);
  border-radius: 20px;
  padding: 22px 28px;
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--ink-100);
  transition: transform 200ms, box-shadow 200ms;
}
.pfaq__item:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--ink-100); }
.pfaq__q {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  font-family: 'Satoshi', sans-serif; font-weight: 900;
  font-size: 1.35rem;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 1.1;
}
.pfaq__plus {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--fc-yellow);
  border: 2.5px solid var(--ink-100);
  border-radius: 999px;
  flex-shrink: 0;
  font-family: 'Satoshi', sans-serif; font-weight: 900;
  font-size: 1.4rem;
  transition: transform 240ms, background 200ms;
}
.pfaq__item.is-open .pfaq__plus { transform: rotate(45deg); background: var(--accent); color: white; }
.pfaq__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 320ms ease, margin-top 320ms ease;
  color: var(--ink-80);
  line-height: 1.65;
  font-size: 0.97rem;
}
.pfaq__item.is-open .pfaq__a { max-height: 320px; margin-top: 14px; }
.pfaq__more { text-align: center; margin-top: 36px; }

/* ============================================================
   CTA FINAL
   ============================================================ */
.pcta-wrap { padding: 0 0 var(--d-section); }
.pcta {
  background: var(--accent);
  color: white;
  padding: clamp(72px, 9vw, 120px) clamp(24px, 4vw, 56px);
  text-align: center;
  border-radius: 32px;
  margin: 0 clamp(20px, 4vw, 56px);
  position: relative;
  overflow: hidden;
  border: 3px solid var(--ink-100);
}
.pcta__title {
  font-family: 'Satoshi', sans-serif; font-weight: 900;
  font-size: clamp(2.6rem, 7vw, 6rem);
  line-height: 0.92;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  margin-bottom: 24px;
  text-wrap: balance;
  position: relative; z-index: 2;
}
.pcta__deco {
  position: absolute;
  width: clamp(80px, 14vw, 160px);
  height: auto;
  opacity: 0.18;
  filter: brightness(0) invert(1);
  pointer-events: none;
  z-index: 1;
}
.pcta__deco--1 { top: 8%;  left: 6%;  transform: rotate(-12deg); animation: bob-a 6s ease-in-out infinite; }
.pcta__deco--2 { top: 14%; right: 8%; transform: rotate(15deg);  width: clamp(60px, 11vw, 120px); animation: bob-b 7s ease-in-out infinite; }
.pcta__deco--3 { bottom: 10%; left: 10%; transform: rotate(8deg); width: clamp(50px, 9vw, 100px); animation: bob-b 8s ease-in-out infinite; }
.pcta__deco--4 { bottom: 8%; right: 6%; transform: rotate(-8deg); animation: bob-a 7.5s ease-in-out infinite; }
.pcta__title mark {
  background: var(--fc-yellow); color: var(--ink-100);
  padding: 0 10px; border-radius: 8px;
  border: 2.5px solid var(--ink-100);
  transform: rotate(-1deg);
  display: inline-block;
  box-shadow: 4px 4px 0 var(--ink-100);
}
.pcta__lead { font-size: 1.15rem; max-width: 540px; margin: 0 auto 36px; line-height: 1.55; opacity: 0.92; position: relative; z-index: 2; }
.pcta__btns { display: inline-flex; gap: 16px; flex-wrap: wrap; justify-content: center; position: relative; z-index: 2; }

.pcta__smile {
  position: absolute;
  z-index: 1;
  filter: drop-shadow(3px 3px 0 rgba(0,0,0,0.2));
}
.pcta__smile--1 { top: 8%; left: 4%;  width: 110px; transform: rotate(-20deg); animation: bob-a 6s ease-in-out infinite; }
.pcta__smile--2 { top: 12%; right: 6%; width: 90px;  transform: rotate(15deg);  animation: bob-b 7s ease-in-out infinite; }
.pcta__smile--3 { bottom: 10%; left: 10%; width: 80px; transform: rotate(8deg); animation: bob-c 5.5s ease-in-out infinite; opacity: 0.55; }
.pcta__smile--4 { bottom: 6%; right: 12%; width: 100px; transform: rotate(-12deg); animation: bob-d 6.5s ease-in-out infinite; opacity: 0.55; }

/* ============================================================
   FOOTER
   ============================================================ */
.pfoot {
  background: var(--ink-100);
  color: rgba(248,248,248,0.7);
  padding: 64px 0 32px;
  position: relative;
  overflow: hidden;
}
.pfoot > .container { position: relative; z-index: 1; }
.pfoot__big {
  display: none;
  left: 0;
  right: 0;
  font-family: 'Satoshi', sans-serif; font-weight: 900;
  font-size: clamp(4rem, 14vw, 13rem);
  line-height: 0.85;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: rgba(255,255,255,0.06);
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
  z-index: 0;
}
.pfoot__grid { display: flex; flex-direction: row; flex-wrap: wrap; gap: clamp(16px, 3vw, 36px); margin-bottom: 40px; align-items: flex-start; justify-content: space-between; }
.pfoot__grid > div:first-child { flex: 0 0 100%; min-width: 0; max-width: none; margin-bottom: 12px; }
.pfoot__col { flex: 1 1 0; min-width: 0; text-align: left; }
.pfoot__brand {
  font-family: 'Satoshi', sans-serif; font-weight: 900;
  font-size: 1.5rem;
  text-transform: uppercase;
  color: var(--fc-paper);
  margin-bottom: 16px;
  display: flex; align-items: center; gap: 10px;
}
.pfoot__brand img { height: 32px; }
.pfoot__brand--logo {
  background: white;
  border: 2.5px solid var(--ink-100);
  border-radius: 14px;
  padding: 10px 16px;
  display: inline-flex;
  align-items: center;
}
.pfoot__brand--logo img {
  height: 44px;
  width: auto;
  filter: none;
}
.pfoot__about { font-size: 0.92rem; line-height: 1.6; max-width: 300px; margin-bottom: 18px; }
.pfoot__socials { display: flex; gap: 10px; }
.pfoot__socials a {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  transition: border-color 180ms, color 180ms, background 180ms;
}
.pfoot__socials a:hover { border-color: var(--fc-yellow); color: var(--fc-yellow); }
.pfoot__label { font-size: 0.95rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fc-yellow); margin-bottom: 16px; font-family: 'Satoshi', sans-serif; font-weight: 900; }
.pfoot__col ul { display: flex; flex-direction: column; gap: 10px; }
.pfoot__col a { color: rgba(248,248,248,0.7); font-size: 0.92rem; transition: color 160ms; }
.pfoot__col a:hover { color: var(--fc-yellow); }
.pfoot__bottom { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 24px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; font-size: 0.8rem; }
.pfoot__legal { display: flex; gap: 24px; flex-wrap: wrap; }

/* ============================================================
   COOKIE BANNER
   ============================================================ */
.pcookie {
  position: fixed;
  bottom: 20px; left: 20px; right: 20px;
  background: var(--fc-paper);
  border: 3px solid var(--ink-100);
  border-radius: 20px;
  padding: 18px 22px;
  box-shadow: 8px 8px 0 var(--ink-100);
  display: flex; gap: 16px; align-items: center;
  max-width: 720px; margin: 0 auto;
  transform: translateY(140%); opacity: 0; pointer-events: none;
  z-index: 60;
  z-index: 100;
  background: white;
  border: 2.5px solid var(--ink-100);
  border-radius: 24px;
  padding: 20px 24px;
  box-shadow: 6px 6px 0 var(--ink-100);
  display: flex; align-items: center; gap: 24px;
  max-width: 720px;
  margin: 0 auto;
  transform: translateY(20px);
  opacity: 0;
  pointer-events: none;
  transition: transform 320ms ease, opacity 320ms ease;
}
.pcookie.is-shown { transform: translateY(0); opacity: 1; pointer-events: auto; }
.pcookie__icon {
  width: 48px; height: 48px;
  background: var(--fc-yellow);
  border: 2.5px solid var(--ink-100);
  border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transform: rotate(-6deg);
  box-shadow: 3px 3px 0 var(--ink-100);
  border: 2px solid var(--ink-100);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}
.pcookie__text { flex: 1; font-size: 0.88rem; line-height: 1.5; color: var(--ink-80); }
.pcookie__text strong { color: var(--ink-100); font-weight: 700; }
.pcookie__text a { color: var(--accent); font-weight: 600; text-decoration: underline; }
.pcookie__btns { display: flex; gap: 8px; flex-shrink: 0; }
.pcookie__btn {
  padding: 10px 18px; border-radius: 999px;
  border: 2.5px solid var(--ink-100);
  font-family: 'Satoshi', sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  box-shadow: 3px 3px 0 var(--ink-100);
  font-weight: 700; font-size: 0.85rem;
  cursor: pointer;
  transition: transform 140ms, box-shadow 140ms;
}
.pcookie__btn--primary { background: var(--accent); color: white; }
.pcookie__btn--ghost   { background: white; color: var(--ink-100); }
.pcookie__btn:hover { transform: translate(-2px,-2px); box-shadow: 5px 5px 0 var(--ink-100); }
.pcookie__btn:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 var(--ink-100); }

/* ============================================================
   SCROLL ANIMATIONS
   ============================================================ */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 700ms ease, transform 700ms cubic-bezier(.2,.8,.2,1); }
.reveal.is-in { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 80ms; }
.reveal-delay-2 { transition-delay: 160ms; }
.reveal-delay-3 { transition-delay: 240ms; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width: 1024px) {
  .pnav__links { display: none; }
  .pnav__cta { display: none; }
  .pnav__burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    border: 2.5px solid var(--ink-100); border-radius: 12px;
    background: white; margin-left: auto;
    box-shadow: 3px 3px 0 var(--ink-100);
  }
  .phero__grid { grid-template-columns: 1fr; gap: 40px; text-align: left; }
  .hero-left .phero__grid, .hero-center .phero__grid { grid-template-columns: 1fr; direction: ltr; }
  .phero__visual { order: 2; min-height: 380px; }
  .phero__phone { max-width: 320px; }
  .pkpi__grid { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; }
  .pstep-row, .pcards, .pvalues { grid-template-columns: 1fr; gap: 32px; }
  .pnotif { grid-template-columns: 1fr; gap: 48px; }
  .pnotif__phone { height: 540px; }
  .pnotif__phone img:not(.pnotif__phone-smile) { width: 240px; }
  .pnotif__phone .pnotif__n--1 { --notif-t: translate(-90px, -120px) rotate(-9deg); }
  .pnotif__phone .pnotif__n--2 { --notif-t: translate(-45px, -55px) rotate(-3deg); }
  .pnotif__phone .pnotif__n--4 { --notif-t: translate(45px, 55px) rotate(3deg); }
  .pnotif__phone .pnotif__n--5 { --notif-t: translate(90px, 120px) rotate(9deg); }
  .pwallet__grid { grid-template-columns: 1fr; gap: 48px; }
  .pwallet__phone { order: 2; }
  .pfoot__grid { gap: 20px; }
  .pbacked__row { grid-template-columns: repeat(3, 1fr); gap: 28px; }
}
@media (max-width: 640px) {
  .phero__title { font-size: clamp(2.8rem, 13vw, 4.6rem); }
  .phero__visual { min-height: 320px; }
  .phero__phone { max-width: 260px; }
  .phero__smile--1 { width: 56px; }
  .phero__smile--2 { width: 70px; }
  .phero__smile--3 { width: 50px; }
  .phero__smile--4 { width: 44px; }
  .phero__ribbon-track { font-size: 1rem; gap: 10px; }
  .phero__ribbon-track .phero__ribbon-group { gap: 8px; }
  .phero__ribbon-track .phero__pill { padding: 8px 14px; box-shadow: 2px 2px 0 var(--ink-100); }
  .pkpi__grid { gap: 32px 16px; }
  .pkpi__num { font-size: clamp(2.6rem, 14vw, 4rem); }
  .psec__title, .pwallet__title, .pcta__title, .pnotif__title { font-size: clamp(2rem, 9vw, 3rem); }
  .pwallet { padding: 36px 28px; margin: 0 14px; }
  .pcta { padding: 56px 24px; margin: 0 14px; }
  .pfoot__grid { gap: 14px; }
  .pfoot__grid > .pfoot__col { flex: 0 0 100%; max-width: 100%; }
  .pbacked__row { grid-template-columns: repeat(2, 1fr); }
  .pcookie { flex-direction: column; gap: 16px; align-items: stretch; padding: 18px; bottom: 14px; left: 14px; right: 14px; }
  .pcookie__btns { width: 100%; }
  .pcookie__btn { flex: 1; }
  .pfaq__q { font-size: 1.05rem; }
  .pnotif__phone { height: 460px; }
  .pnotif__phone img:not(.pnotif__phone-smile) { width: 200px; }
  .pnotif__phone .pnotif__n--1 { --notif-t: translate(-65px, -100px) rotate(-9deg); }
  .pnotif__phone .pnotif__n--2 { --notif-t: translate(-32px, -45px) rotate(-3deg); }
  .pnotif__phone .pnotif__n--4 { --notif-t: translate(32px, 45px) rotate(3deg); }
  .pnotif__phone .pnotif__n--5 { --notif-t: translate(65px, 100px) rotate(9deg); }
}

/* ============================================================
   MOBILE MENU
   ============================================================ */
.pmenu {
  position: fixed; left: 0; right: 0; top: 0;
  max-height: 100vh;
  background: var(--fc-paper);
  border-bottom: 3px solid var(--ink-100);
  border-radius: 0 0 28px 28px;
  box-shadow: none;
  z-index: 200;
  display: flex; flex-direction: column;
  padding: 24px clamp(20px, 4vw, 56px);
  overflow-y: auto;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform 320ms cubic-bezier(.2,.8,.2,1), visibility 0s linear 320ms, box-shadow 0s linear 320ms;
}
.pmenu.is-open {
  transform: translateY(0);
  visibility: visible;
  box-shadow: 0 12px 0 var(--ink-100);
  transition: transform 320ms cubic-bezier(.2,.8,.2,1), visibility 0s linear 0s, box-shadow 0s linear 0s;
}
.pmenu__top { display: flex; align-items: center; justify-content: space-between; height: 52px; margin-bottom: 18px; }
.pmenu__top img { height: 32px; }
.pmenu__close { width: 44px; height: 44px; border: 2.5px solid var(--ink-100); border-radius: 12px; background: white; box-shadow: 3px 3px 0 var(--ink-100); display: inline-flex; align-items: center; justify-content: center; }
.pmenu__list { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.pmenu__list a.pmenu__cta {
  font-family: 'Satoshi', sans-serif; font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(2.4rem, 9vw, 3.4rem);
  background: var(--accent);
  color: white;
  border: 3px solid var(--ink-100);
  border-radius: 16px;
  padding: 14px 22px;
  text-align: center;
  margin-top: 12px;
  box-shadow: 5px 5px 0 var(--ink-100);
}
.pmenu__list a.pmenu__faq { color: var(--fc-orange); }
.pmenu__list a {
  font-family: 'Satoshi', sans-serif; font-weight: 900;
  font-size: clamp(2rem, 8vw, 3rem);
  text-transform: uppercase;
  line-height: 1;
  padding: 12px 0;
  border-bottom: 2px solid var(--ink-10);
}
.pmenu__cta { padding: 24px 0; }


/* ============================================================
   CTAs sezione wallet & notifiche
   ============================================================ */
.pwallet__cta {
  display: flex; justify-content: center;
  margin-top: clamp(40px, 5vw, 64px);
}
.pwallet__cta .btn-cart {
  background: var(--fc-yellow);
  color: var(--ink-100);
  /* Stessa misura della CTA finale di pagina (.pcta__btn--big) */
  font-size: clamp(1.1rem, 4vw, 1.4rem);
  padding: 20px 36px;
}
@media (max-width: 640px) {
  .pwallet__cta .btn-cart { font-size: 1rem; padding: 16px 32px; }
}
.pnotif-sec__cta {
  display: flex; flex-direction: row; justify-content: center; align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: clamp(72px, 12vw, 120px);
  position: relative;
  z-index: 2;
}
.pnotif-sec__hl {
  display: inline-block;
  background: var(--fc-yellow);
  padding: 16px 26px;
  border: 2.5px solid var(--ink-100);
  border-radius: 999px;
  box-shadow: 4px 4px 0 var(--ink-100);
  transform: rotate(-2deg);
  font-family: 'Satoshi', sans-serif; font-weight: 900;
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--ink-100);
  line-height: 1;
}
.pnotif-sec__arrow {
  font-family: 'Satoshi', sans-serif; font-weight: 900;
  color: #fff;
  font-size: 1.8rem;
  line-height: 1;
}
.pnotif-sec__cta .btn-cart {
  font-size: 1.2rem;
  padding: 18px 36px;
  border-radius: 999px;
}
/* override per ramen (offerta lampo): immagine leggermente piu piccola, sfondo grigio chiaro */
.pnotif-car__visual img[src*="ramen"] {
  object-fit: contain;
  object-position: center;
  background: #d9d6d1;
  padding: 22px;
  box-sizing: border-box;
}


/* ============================================================
   PRODUCT CAROUSEL (slider laterale)
   ============================================================ */
.pprod-car { position: relative; }
.pprod-car__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 0;
}
.pprod-car__track::-webkit-scrollbar { display: none; }
.pprod-car__slide {
  scroll-snap-align: center;
  scroll-snap-stop: always;
  display: flex; justify-content: center;
  padding: 12px 14px 24px;
}
.pprod-car__slide .pcard {
  width: 100%;
  max-width: 360px;
  min-height: 0;
}
.pprod-car__slide .pcard__visual {
  height: 240px;
  padding: 10px;
}
.pprod-car__slide .pcard__visual img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.pprod-car__dots { display: flex; gap: 10px; justify-content: center; margin-top: 4px; }
.pprod-car__dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: rgba(13,14,16,0.20);
  border: 2px solid var(--ink-100);
  transition: background 180ms, transform 180ms;
}
.pprod-car__dot.is-active { background: var(--accent); transform: scale(1.2); }

/* Offerta lampo: sfondo chiaro come le altre, immagine leggermente piu grande, qualita ridotta */
.pnotif-car__visual img[src*="ramen"] {
  object-fit: contain;
  object-position: center;
  background: #F8F8F8;
  padding: 10px;
  box-sizing: border-box;
  filter: saturate(0.85) contrast(0.95);
  image-rendering: auto;
}


/* Product carousel: badge non deve essere tagliato */
.pprod-car__track { overflow-y: visible; }
.pprod-car__slide { padding-top: 28px; overflow: visible; }
.pprod-car__slide .pcard { overflow: visible; }

/* Si fidano di noi: layout vertical, piu spazio, meno spazio sotto */
.pbacked { padding: clamp(40px, 5vw, 56px) 0 clamp(20px, 3vw, 28px); }
.pbacked__label {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.pbacked__sub {
  font-family: 'Satoshi', sans-serif; font-weight: 900;
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.pbacked-carousel { margin-top: 4px; }


/* Notif carousel: piu spazio tra head e prima notifica */
.pnotif-sec .pnotif-head { margin-bottom: clamp(40px, 7vw, 64px) !important; }
/* Riduci spazio sotto carousel verso CTA */
.pnotif-sec__cta { margin-top: clamp(24px, 4vw, 36px) !important; }
/* CTA finale: disposizione coerente anche su mobile */
@media (max-width: 640px) {
  .pcta__title { font-size: clamp(1.9rem, 8vw, 2.6rem); line-height: 1.02; letter-spacing: -0.035em; }
  .pcta__title mark.hl-yellow, .pcta__title mark { display: inline-block; padding: 0 8px; }
  .pcta { padding: 22px 18px 56px; }
  .pcta__deco--1, .pcta__deco--2 { display: none; }
  .pcta__deco--3 {
    bottom: 18px; left: 10px; top: auto;
    width: 64px; transform: rotate(8deg);
    opacity: 0.45; filter: none;
  }
  .pcta__deco--4 {
    bottom: 18px; right: 10px; top: auto;
    width: 64px; transform: rotate(-8deg);
    opacity: 0.45; filter: none;
  }
  .pcta__btn--big { font-size: 1rem; padding: 16px 32px; }
}


/* === MARK RECTANGLES — proporzionati su mobile in tutte le sezioni === */
@media (max-width: 640px) {
  .pcta__title mark,
  .pwallet__title mark,
  .pnotif__title mark,
  .faq-hero__title mark,
  .ct-h mark,
  .pv-h mark {
    padding: 0 6px !important;
    border-width: 1.5px !important;
    border-radius: 5px !important;
    box-shadow: 2px 2px 0 var(--ink-100) !important;
  }
}


/* Carte prodotti: no sfondo bianco, immagini piu grandi */
.pprod-car__slide .pcard__visual {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  height: 300px !important;
}
.pprod-car__slide .pcard__visual img {
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  filter: drop-shadow(4px 4px 0 rgba(13,14,16,0.18));
}

/* Notifiche carousel: piu spazio sopra immagine, dots vicini alla caption */
.pnotif-car__slide { padding-top: 28px !important; gap: 14px !important; padding-bottom: 4px !important; }
.pnotif-car__caption { margin-bottom: 0 !important; }
.pnotif-car__dots { margin-top: 10px !important; margin-bottom: 0 !important; }

/* Si fidano di noi: loghi leggermente piu grandi */
.pbacked-badge { width: 80px !important; height: 80px !important; }
@media (max-width: 640px) {
  /* Sezione "Si fidano di noi" più piccola della sezione sotto */
  .pbacked { padding: clamp(24px, 4vw, 36px) 0 clamp(12px, 2vw, 18px) !important; }
  .pbacked-badge { width: 56px !important; height: 56px !important; }
  .pbacked-carousel__track { gap: 12px !important; }
  .pbacked__label { font-size: clamp(1rem, 3vw, 1.4rem) !important; gap: 8px !important; margin-bottom: 10px !important; }
  .pbacked__hl { padding: 4px 12px !important; box-shadow: 2px 2px 0 var(--ink-100) !important; }
  .pbacked__sub { font-size: clamp(0.9rem, 2vw, 1.2rem) !important; }
}


/* Notif CTA: piu spazio dai dots, compenso con padding-bottom sezione */
.pnotif-sec__cta { margin-top: clamp(72px, 12vw, 110px) !important; }
.pnotif-sec { padding-bottom: clamp(28px, 4vw, 48px) !important; }


/* Carte prodotti: ripristino riquadro bianco, immagine leggermente piu piccola */
.pprod-car__slide .pcard__visual {
  background: white !important;
  border: 2px solid var(--ink-100) !important;
  border-radius: 16px !important;
  padding: 18px !important;
  height: 260px !important;
  box-shadow: 0 8px 18px rgba(13,14,16,0.10) !important;
}
.pprod-car__slide .pcard__visual img {
  width: 90% !important;
  height: 90% !important;
  max-width: 90% !important;
  max-height: 90% !important;
  object-fit: contain !important;
  filter: none !important;
}


/* Carte prodotti: immagine carta piu grande dentro il riquadro bianco */
.pprod-car__slide .pcard__visual { padding: 8px !important; height: 280px !important; }
.pprod-car__slide .pcard__visual img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
}


/* Carte prodotti: niente ombra grigia */
.pprod-car__slide .pcard__visual { box-shadow: none !important; }
.pprod-car__slide .pcard__visual img { filter: none !important; box-shadow: none !important; }


/* Carte prodotti: bg riquadro #F8F8F8 per uniformare con l'ombra dell'immagine */
.pprod-car__slide .pcard__visual { background: #F8F8F8 !important; }


/* Carte prodotti: scala le piu piccole per allinearsi a Urban Burger */
.pprod-car__slide .pcard__visual img[src*="card-punti"]:not([src*="-v2"]),
.pprod-car__slide .pcard__visual img[src*="card-coupon"]:not([src*="-v2"]) {
  transform: scale(1.08);
  transform-origin: center;
}


/* Sezioni più compatte (richiesta utente) */
.density-compact { --d-section: clamp(40px, 5vw, 64px) !important; --d-block: clamp(24px, 3vw, 40px) !important; }


/* === SATOSHI MOBILE TUNING — Satoshi non è condensato come Anton, comprimo i display sotto 600px === */
@media (max-width: 600px) {
  .phero__title { font-size: clamp(2.6rem, 11vw, 3.6rem) !important; letter-spacing: -0.035em; line-height: 1.02; }
  .psec__title  { font-size: clamp(2rem, 8.5vw, 2.8rem) !important; letter-spacing: -0.03em; line-height: 0.98; }
  .pkpi__num    { font-size: clamp(3.6rem, 14vw, 5rem) !important; letter-spacing: -0.04em; }
  .pcta__title  { font-size: clamp(1.9rem, 8vw, 2.6rem) !important; letter-spacing: -0.035em; line-height: 1.02; }
  .pfoot__big   { font-size: clamp(3rem, 18vw, 7rem) !important; letter-spacing: -0.04em; }
  .pcard__title, .pstep__title, .pvalue__title, .pwallet__title, .pnotif__title { letter-spacing: -0.025em; }
  .phero__ribbon-track { font-size: 1.2rem; letter-spacing: -0.01em; }
}



/* ============================================================
   MOBILE TUNING — pass aggiornato (banner via, sezioni ravvicinate,
   loghi wallet sotto le CTA, footer in fila, dropdown carte)
   ============================================================ */

/* Titolo hero: massimo 3 righe su mobile */
@media (max-width: 640px) {
  .phero__title {
    font-size: clamp(1.7rem, 8.2vw, 2.6rem) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.035em !important;
    text-wrap: balance;
  }
  .phero__title .hl-violet,
  .phero__title .hl-yellow { padding: 0 6px; }
}

/* Loghi wallet sotto le CTA dell'hero — affiancati, stessa misura,
   leggermente più piccoli dei bottoni sopra. */
.phero__wallets {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}
.phero__wallets img {
  height: 36px;
  width: auto;
  max-width: 50%;
  object-fit: contain;
  display: block;
}
@media (max-width: 640px) {
  .phero__wallets { gap: 10px; margin-top: 14px; }
  .phero__wallets img { height: 32px; }
}

/* Sezioni più ravvicinate su mobile (chiusura spazi rossi). */
@media (max-width: 880px) {
  /* Ribbon → KPI: niente paper bg sotto al ribbon, overlap di 2px sul KPI per evitare sub-pixel gap. */
  .phero { padding-bottom: 0; }
  .pkpi { margin-top: -2px !important; }
}
@media (max-width: 640px) {
  .density-compact { --d-section: clamp(28px, 4vw, 44px) !important; --d-block: clamp(18px, 2.5vw, 28px) !important; }
  .phero { padding-bottom: 0; }
  .phero__ribbon { margin-top: clamp(20px, 4vw, 32px) !important; }
  /* Overlap di 2px sul KPI per coprire il sub-pixel gap nero tra ribbon e KPI.
     Padding-top molto basso (8px) per chiudere lo spazio nero tra il carosello
     settori e i numeri KPI. Padding-bottom resta normale per dare aria sotto. */
  .pkpi { margin-top: -2px !important; padding: 8px 0 clamp(28px, 5vw, 44px) !important; }
  .pkpi--duo .pkpi__grid--duo { gap: 18px 16px; }
  .pnotif-sec { padding-bottom: clamp(16px, 3vw, 24px) !important; }
  .pnotif-sec__cta { margin-top: clamp(28px, 6vw, 44px) !important; }
  .pwallet-wrap { padding: clamp(28px, 5vw, 44px) 0 !important; }
  .pwallet__cta { margin-top: clamp(20px, 4vw, 32px); }
  .pcta-wrap { padding: 0 0 clamp(24px, 5vw, 40px) !important; }
  .pfaq__more { margin-top: clamp(20px, 4vw, 32px) !important; }
  /* CTA "Contattaci" equidistante tra Come funziona e Prodotti */
  .psec.psec--paper#come-funziona { padding-bottom: clamp(20px, 4vw, 32px) !important; }
  .psec.psec--paper#prodotti { padding-top: clamp(20px, 4vw, 32px) !important; }
  .pcards__precta { margin: clamp(18px, 4vw, 32px) 0 clamp(18px, 4vw, 32px) !important; }
  /* Sezione notifiche: chiusura spazio tra lead e carousel */
  .pnotif-sec .pnotif-head { margin-bottom: clamp(8px, 2vw, 16px) !important; }
  .pnotif-car__slide { padding-top: 6px !important; }
}

/* CTA dentro la sezione prodotti (prima e dopo carousel) */
.pcards__precta,
.pcards__cta {
  display: flex;
  justify-content: center;
  margin: clamp(8px, 2vw, 16px) 0 clamp(16px, 3vw, 24px);
}
.pcards__cta { margin: clamp(16px, 3vw, 24px) 0 clamp(8px, 2vw, 16px); }

/* Dropdown "altri tipi di carta" sotto "e tante altre…" */
.pcards__dropdown {
  max-width: 360px;
  margin: 18px auto 0;
}
.pcards__dropdown-toggle {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  font: inherit;
  font-family: 'Satoshi', sans-serif; font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 0.92rem;
  padding: 12px 18px;
  background: white;
  color: var(--ink-100);
  border: 2.5px solid var(--ink-100);
  border-radius: 999px;
  box-shadow: 4px 4px 0 var(--ink-100);
  cursor: pointer;
  transition: transform 140ms, box-shadow 140ms;
}
.pcards__dropdown-toggle:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink-100); }
.pcards__dropdown-arrow {
  display: inline-block;
  transition: transform 200ms;
  font-size: 1rem;
}
.pcards__dropdown.is-open .pcards__dropdown-arrow { transform: rotate(180deg); }
.pcards__dropdown-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 280ms ease, opacity 200ms ease, margin 200ms ease;
}
.pcards__dropdown.is-open .pcards__dropdown-list {
  max-height: 560px;
  opacity: 1;
  margin-top: 14px;
}
.pcards__dropdown-item {
  background: white;
  border: 2px solid var(--ink-100);
  border-radius: 14px;
  padding: 10px 14px;
  box-shadow: 3px 3px 0 var(--ink-100);
  display: flex; flex-direction: column; gap: 2px;
  text-align: left;
}
.pcards__dropdown-item strong {
  font-family: 'Satoshi', sans-serif; font-weight: 900;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.pcards__dropdown-item span {
  font-size: 0.85rem;
  color: var(--ink-80);
  line-height: 1.35;
}

/* Footer: Prodotto / Azienda / Contatti SEMPRE in fila su mobile */
@media (max-width: 640px) {
  .pfoot__grid > .pfoot__col {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  .pfoot__grid { gap: 10px !important; align-items: flex-start; }
  .pfoot__label { font-size: 0.78rem !important; margin-bottom: 10px !important; letter-spacing: 0.05em; }
  .pfoot__col ul { gap: 8px !important; }
  .pfoot__col a { font-size: 0.82rem !important; }
}

/* ============================================================
   MOBILE TUNING — pass 22 maggio 2026
   ============================================================ */

/* Hero: titolo più grande + chiusura spazi sotto title/lead */
@media (max-width: 640px) {
  .phero__title {
    font-size: clamp(1.85rem, 8.6vw, 2.8rem) !important;
    line-height: 1.02 !important;
    margin-bottom: 6px !important;
  }
  .phero__lead {
    margin-top: 0 !important;
    margin-bottom: 16px !important;
  }
}
@media (max-width: 600px) {
  .phero__title {
    font-size: clamp(1.85rem, 8.8vw, 2.8rem) !important;
    line-height: 1.02 !important;
  }
}

/* Dropdown "Vedi tutti i tipi di carta": toggle giallo, ombra Carta regalo non tagliata */
.pcards__dropdown-toggle {
  background: var(--fc-yellow) !important;
}
.pcards__dropdown.is-open .pcards__dropdown-list {
  max-height: 800px;
  padding-bottom: 8px;
  overflow: visible;
}

/* CTA sezione notifiche: più piccola su mobile */
@media (max-width: 640px) {
  .pnotif-sec__cta .btn-cart {
    font-size: 0.98rem !important;
    padding: 13px 22px !important;
  }
}

/* CTA hero: proporzionate su mobile (più compatte) */
@media (max-width: 640px) {
  .phero__ctas { gap: 10px !important; }
  .phero__ctas .btn-cart {
    font-size: 0.88rem !important;
    padding: 11px 18px !important;
    border-width: 2px !important;
    box-shadow: 3px 3px 0 var(--ink-100) !important;
  }
}

/* Hero hand-iPhone alzato: la mano resta dentro il cerchio giallo,
   solo la parte alta del telefono esce sopra */
@keyframes phone-bob {
  0%, 100% { transform: translateY(-32px) rotate(0); }
  50%      { transform: translateY(-44px) rotate(-1deg); }
}

/* CTA "Contattaci" attaccata ai 3 step (dentro Come funziona) */
.pstep-row__cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(20px, 3.5vw, 32px);
  margin-bottom: 0;
}

/* Cookie banner: l'icona del cookie deve riempire bene il cerchio giallo */
.pcookie__icon img { object-fit: contain; }

/* Wallet: riduci gli spazi della sezione */
@media (max-width: 640px) {
  .pwallet-wrap { padding: clamp(16px, 3vw, 28px) 0 !important; }
  .pwallet { padding: 28px 22px !important; margin: 0 14px !important; }
  .pwallet__grid { gap: 14px !important; }
  .pwallet__lead { margin-bottom: 18px !important; font-size: 0.98rem !important; }
  .pwallet__title { margin-bottom: 16px !important; }
  .pwallet__cta { margin-top: clamp(40px, 8vw, 56px) !important; }
  .pwallet__phone video { max-width: 260px !important; }
}

/* Footer: PRODOTTO / AZIENDA / CONTATTI tutti allineati a sinistra, equidistanti.
   Le 3 colonne sono dimensionate al contenuto e raggruppate a sinistra,
   così CONTATTI è alla stessa distanza da AZIENDA quanto AZIENDA è da PRODOTTO. */
@media (max-width: 640px) {
  .pfoot__grid > .pfoot__col:nth-of-type(1),
  .pfoot__grid > .pfoot__col:nth-of-type(2),
  .pfoot__grid > .pfoot__col:nth-of-type(3) { text-align: left; }
  .pfoot__grid {
    justify-content: flex-start !important;
    gap: clamp(20px, 6vw, 36px) !important;
  }
  .pfoot__grid > .pfoot__col {
    flex: 0 0 auto !important;
    max-width: none !important;
    width: auto !important;
  }
  /* L'email può essere lunga: la spezziamo se serve per non rompere il layout. */
  .pfoot__grid > .pfoot__col:nth-of-type(3) ul a {
    word-break: break-word;
    overflow-wrap: anywhere;
  }
}

/* Hero più compatto solo desktop: titolo + visual e ribbon sopra la piega */
@media (min-width: 1025px) {
  .phero__title { font-size: clamp(2.4rem, 4.2vw, 4rem); line-height: 1; }
  .phero { padding-top: clamp(8px, 1vw, 18px); padding-bottom: clamp(16px, 2vw, 28px); }
  .phero__pill { margin-bottom: 10px; padding: 4px 12px; font-size: 0.78rem; }
  .phero__lead { margin-top: 10px; font-size: clamp(0.98rem, 1.1vw, 1.1rem); }
  .phero__visual { min-height: 360px; }
  .phero__phone { max-width: 300px; }
  .phero__ctas { margin-top: 18px; }
  .phero__ribbon { margin-top: clamp(48px, 5.5vw, 80px); }
}

/* Hand-iPhone: leggero shift a sinistra solo su mobile,
   per tenere il polso dentro al cerchio giallo */
@media (max-width: 880px) {
  .phero__phone--v2 { margin-left: clamp(-44px, -7vw, -18px); }
}

/* ============================================================
   PLOST — Calcolatore "Quanto stai perdendo?"
   Sezione tra "si fidano di noi" e "wallet nativi".
   ============================================================ */
.plost { padding-block: var(--d-section); }
.plost .psec__head { margin-bottom: clamp(24px, 4vw, 40px); }

/* Selettore variante (3 esempi) */
.plost-variants {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 auto clamp(20px, 3vw, 32px);
  max-width: 720px;
}
.plost-vbtn {
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  cursor: pointer;
  padding: 9px 18px;
  border: 2px solid var(--ink-100);
  border-radius: 999px;
  background: white;
  color: var(--ink-100);
  font-weight: 700;
  font-size: 0.88rem;
  box-shadow: 3px 3px 0 var(--ink-100);
  transition: transform 120ms, box-shadow 120ms, background 160ms, color 160ms;
}
.plost-vbtn:hover { transform: translate(-2px,-2px); box-shadow: 5px 5px 0 var(--ink-100); }
.plost-vbtn.is-active { background: var(--ink-100); color: white; }

/* Card principale */
.plost-card {
  background: white;
  border: 2.5px solid var(--ink-100);
  border-radius: 28px;
  padding: clamp(22px, 4vw, 40px);
  max-width: 720px;
  margin: 0 auto;
  display: grid;
  gap: clamp(20px, 3vw, 32px);
}

/* Controlli (sliders + period + inputs) */
.plost-controls { display: grid; gap: clamp(16px, 2.5vw, 22px); }
.plost-field { display: grid; gap: 10px; }
.plost-field-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.plost-field label {
  font-weight: 800;
  font-size: 0.86rem;
  color: var(--ink-100);
  letter-spacing: 0.01em;
}

/* Selettore periodo */
.plost-period {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  border: 2px solid var(--ink-100);
  border-radius: 999px;
  padding: 4px;
  background: #FAF8F4;
  box-shadow: inset 0 0 0 0 var(--ink-100);
}
.plost-pbtn {
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  cursor: pointer;
  background: transparent;
  border: none;
  border-radius: 999px;
  padding: 9px 6px;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ink-80);
  transition: background 160ms, color 160ms, transform 120ms;
}
.plost-pbtn.is-active {
  background: var(--ink-100);
  color: white;
}

/* Slider + input numerico */
.plost-numwrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #FAF8F4;
  border: 2px solid var(--ink-100);
  border-radius: 10px;
  padding: 2px 8px;
}
.plost-numwrap--right { flex-direction: row; }
.plost-numpre, .plost-numsuf {
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--ink-80);
}
.plost-numin {
  font: inherit;
  font-weight: 800;
  font-size: 0.98rem;
  color: var(--ink-100);
  background: transparent;
  border: none;
  outline: none;
  width: 64px;
  text-align: right;
  padding: 6px 0;
  -moz-appearance: textfield;
}
.plost-numin::-webkit-outer-spin-button,
.plost-numin::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.plost-numin--euro { width: 56px; }
/* number input quando NON è dentro un wrap (clienti) */
.plost-field-head > .plost-numin {
  background: #FAF8F4;
  border: 2px solid var(--ink-100);
  border-radius: 10px;
  padding: 6px 10px;
  width: 80px;
}

/* Range — playful */
.plost-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 14px;
  background: transparent;
  cursor: pointer;
  margin: 0;
}
.plost-range::-webkit-slider-runnable-track {
  height: 12px;
  border: 2px solid var(--ink-100);
  border-radius: 999px;
  background: linear-gradient(to right, var(--accent) 0 var(--pct, 0%), #FAF8F4 var(--pct, 0%) 100%);
}
.plost-range::-moz-range-track {
  height: 12px;
  border: 2px solid var(--ink-100);
  border-radius: 999px;
  background: #FAF8F4;
}
.plost-range::-moz-range-progress {
  height: 12px;
  background: var(--accent);
  border-radius: 999px;
}
.plost-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px; height: 26px;
  background: white;
  border: 2.5px solid var(--ink-100);
  border-radius: 50%;
  box-shadow: 2px 2px 0 var(--ink-100);
  margin-top: -9px;
  cursor: grab;
  transition: transform 120ms;
}
.plost-range::-webkit-slider-thumb:active { transform: scale(0.95); }
.plost-range::-moz-range-thumb {
  width: 22px; height: 22px;
  background: white;
  border: 2.5px solid var(--ink-100);
  border-radius: 50%;
  box-shadow: 2px 2px 0 var(--ink-100);
  cursor: grab;
}

/* Visualizzazione (contenitore) */
.plost-visbox {
  border: 2.5px solid var(--ink-100);
  border-radius: 22px;
  padding: clamp(22px, 4vw, 36px) clamp(18px, 3vw, 30px);
  background: var(--fc-paper, #FAF8F4);
  animation: plost-fade 280ms ease-out both;
}
@keyframes plost-fade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.plost-vis-eyebrow {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  color: var(--ink-60);
  text-align: center;
  margin-bottom: 14px;
}
.plost-vis-foot {
  font-size: 0.85rem;
  color: var(--ink-60);
  text-align: center;
  margin-top: 18px;
  line-height: 1.55;
}

/* Variante A — numero focale */
.plost-vis--a { text-align: center; }
.plost-bignum {
  font-family: 'Satoshi', sans-serif;
  font-weight: 900;
  font-size: clamp(3rem, 13vw, 5.6rem);
  line-height: 0.95;
  color: var(--accent);
  letter-spacing: -0.03em;
  text-shadow: 3px 3px 0 var(--ink-100);
  margin: 4px 0 16px;
}
.plost-vis-detail {
  font-size: 1rem;
  color: var(--ink-80);
  line-height: 1.5;
}
.plost-vis-detail strong { color: var(--ink-100); }
.plost-vis-detail .plost-x { color: var(--ink-40); margin: 0 4px; }

/* Variante B — scontrino */
.plost-vis--b { display: flex; justify-content: center; }
.plost-rcpt {
  width: 100%;
  max-width: 380px;
  background: white;
  border: 2px solid var(--ink-100);
  padding: 22px 22px 14px;
  font-family: 'Courier New', ui-monospace, monospace;
  font-size: 0.9rem;
  color: var(--ink-100);
  position: relative;
  box-shadow: 4px 4px 0 var(--ink-100);
  border-radius: 4px 4px 0 0;
}
/* dentellatura tipo scontrino */
.plost-rcpt::after {
  content: "";
  position: absolute;
  left: -2px; right: -2px; bottom: -14px;
  height: 14px;
  background:
    radial-gradient(circle at 7px 7px, white 6px, transparent 6.5px) repeat-x;
  background-size: 14px 14px;
  border-bottom: 2px solid transparent;
  filter: drop-shadow(0 2px 0 var(--ink-100));
}
.plost-rcpt-top {
  text-align: center;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.9rem;
}
.plost-rcpt-sub {
  text-align: center;
  font-size: 0.78rem;
  color: var(--ink-60);
  margin-bottom: 10px;
}
.plost-rcpt-dash {
  height: 1px;
  background: repeating-linear-gradient(to right, var(--ink-100) 0 5px, transparent 5px 10px);
  margin: 10px 0;
}
.plost-rcpt-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 0;
}
.plost-rcpt-line--muted { color: var(--ink-60); font-size: 0.85rem; }
.plost-rcpt-tot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0 4px;
  font-weight: 800;
  font-size: 1.05rem;
  text-transform: uppercase;
}
.plost-rcpt-tot span:last-child { color: var(--accent); font-size: 1.2rem; }
.plost-rcpt-foot {
  text-align: center;
  font-size: 0.72rem;
  color: var(--ink-60);
  margin-top: 8px;
  font-style: italic;
}

/* Variante C — trio mese/anno/5anni */
.plost-vis--c { text-align: center; }
.plost-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 4px 0 4px;
}
.plost-trio-card {
  background: var(--accent);
  color: white;
  border: 2.5px solid var(--ink-100);
  border-radius: 16px;
  padding: 14px 8px;
  box-shadow: 3px 3px 0 var(--ink-100);
  display: grid;
  gap: 6px;
}
.plost-trio-card--accent {
  background: var(--accent);
  color: white;
}
.plost-trio-card--hero {
  transform: rotate(-1deg);
  box-shadow: 4px 4px 0 var(--ink-100);
}
.plost-trio-card .plost-trio-lbl,
.plost-trio-card .plost-trio-num,
.plost-trio-card--accent .plost-trio-lbl,
.plost-trio-card--accent .plost-trio-num { color: white; }
.plost-trio-lbl {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
  opacity: 0.85;
}
.plost-trio-num {
  font-family: 'Satoshi', sans-serif;
  font-weight: 900;
  font-size: clamp(1rem, 4.6vw, 1.4rem);
  line-height: 1;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

/* CTA in fondo alla card */
.plost-cta { display: flex; justify-content: center; }

/* Tweaks mobile */
.plost-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  margin-left: 6px;
  border-radius: 999px;
  background: var(--ink-100);
  color: white;
  font-size: 0.65rem;
  font-weight: 800;
  cursor: help;
  vertical-align: middle;
}
.plost-field-hint {
  font-size: 0.68rem;
  color: var(--ink-60);
  line-height: 1.4;
  margin-top: 2px;
  font-style: italic;
}
.plost-hint-mark {
  display: inline-block;
  margin-left: 2px;
  color: var(--accent);
  font-weight: 900;
  vertical-align: super;
  font-size: 0.85em;
}
@media (max-width: 640px) {
  .plost-card { padding: 22px 18px; }
  /* Periodo (Giorno/Settimana/Mese) più compatto per lasciare spazio ai box risultato */
  .plost-pbtn { font-size: 0.7rem; padding: 6px 2px; letter-spacing: 0.02em; }
  .plost-numin { width: 56px; font-size: 0.92rem; }
  .plost-field-head > .plost-numin { width: 68px; }
  /* Trio risultati in alto + sticky così resta visibile mentre l'utente sposta gli slider */
  .plost-card { display: flex; flex-direction: column; gap: 14px; }
  .plost-visbox {
    order: -1;
    position: sticky;
    top: 8px;
    z-index: 5;
    padding: 12px 12px;
    border-radius: 18px;
    box-shadow: 4px 4px 0 var(--ink-100);
    background: var(--fc-paper, #FAF8F4);
  }
  .plost-visbox .plost-vis-eyebrow {
    font-size: 0.62rem;
    margin-bottom: 8px;
    letter-spacing: 0.07em;
  }
  .plost-trio {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin: 0;
  }
  .plost-trio-card {
    padding: 14px 6px;
    border-radius: 14px;
    border-width: 2.5px;
    box-shadow: 3px 3px 0 var(--ink-100);
    gap: 4px;
  }
  .plost-trio-card--hero { transform: none; box-shadow: 3px 3px 0 var(--ink-100); }
  .plost-trio-lbl { font-size: 0.62rem; letter-spacing: 0.06em; }
  .plost-trio-num { font-size: clamp(1rem, 4.4vw, 1.35rem); letter-spacing: -0.025em; }
  .plost-vis-foot { font-size: 0.7rem; margin-top: 8px; line-height: 1.45; }
  .plost-bignum { text-shadow: 2px 2px 0 var(--ink-100); }
  .plost-rcpt { padding: 18px 18px 12px; font-size: 0.84rem; }
  .plost-vbtn { padding: 8px 14px; font-size: 0.84rem; }
}
@media (max-width: 380px) {
  .plost-field-head { flex-wrap: wrap; }
}

/* Anchor wrappers per step/wallet cliccabili: nessuna sottolineatura, eredita il colore */
a.pstep__visual,
a.pwallet__phone { text-decoration: none; color: inherit; cursor: pointer; }
a.pstep__visual:focus-visible,
a.pwallet__phone:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; border-radius: 8px; }

/* Mobile: calcolatore ancora più compatto per stare in una schermata */
@media (max-width: 640px) {
  .plost { padding-block: clamp(32px, 6vw, 48px); }
  .plost .psec__head { margin-bottom: 14px; }
  .plost .psec__title { font-size: clamp(2rem, 7.5vw, 2.6rem); margin-bottom: 6px; }
  .plost .psec__lead { font-size: 0.92rem; line-height: 1.4; margin-bottom: 0; }
  .plost-card { padding: 14px 14px 16px; border-radius: 22px; gap: 10px; }
  .plost-controls { gap: 10px; }
  .plost-field { gap: 6px; }
  .plost-field label { font-size: 0.78rem; }
  .plost-field-hint { font-size: 0.62rem; line-height: 1.3; }
  .plost-pbtn { font-size: 0.68rem; padding: 5px 2px; }
  .plost-numin { font-size: 0.86rem; }
  .plost-range { height: 22px; }
  .plost-range::-webkit-slider-runnable-track { height: 10px; }
  .plost-range::-webkit-slider-thumb { width: 18px; height: 18px; margin-top: -6px; }
  .plost-visbox { padding: 10px 10px; border-radius: 14px; }
  .plost-visbox .plost-vis-eyebrow { font-size: 0.58rem; margin-bottom: 6px; }
  .plost-trio-card { padding: 10px 4px; border-radius: 12px; }
  .plost-trio-lbl { font-size: 0.58rem; }
  .plost-trio-num { font-size: clamp(0.95rem, 4vw, 1.2rem); }
  .plost-vis-foot { font-size: 0.66rem; margin-top: 6px; }
  .plost-cta .btn-cart { padding: 12px 18px; font-size: 0.92rem; }
}

/* ============================================================
   Hero ribbon — JS-driven scroll + touch drag (LEGACY: ora si usa il
   marquee CSS, queste regole restano disattivate finché qualcuno non
   riapplica la classe .phero__ribbon--draggable nel JSX).
   ============================================================ */