/* ==========================================================================
   Pausa Vending — Landing styles
   ========================================================================== */

@font-face { font-family:"Poppins"; src:url("./fonts/Poppins-SemiBold.ttf") format("truetype"); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"Poppins"; src:url("./fonts/Poppins-Bold.ttf") format("truetype"); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"Inter"; src:url("./fonts/Inter-Regular.ttf") format("truetype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Inter"; src:url("./fonts/Inter-Medium.ttf") format("truetype"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Inter"; src:url("./fonts/Inter-SemiBold.ttf") format("truetype"); font-weight:600; font-style:normal; font-display:swap; }

:root{
  /* palette — brief locked */
  --arancio:        #FE6F1C;
  --arancio-dark:   #E0541A;
  --arancio-deep:   #B53F0E;
  --arancio-soft:   #FFE8DA;
  --rame:           #B5762A;
  --rame-dark:      #8E5C1F;
  --rame-soft:      #F1E1C5;
  --antracite:      #2D2D2D;
  --antracite-soft: #3A3A3A;
  --grigio-medio:   #6B6B6B;
  --grigio-chiaro:  #A8A8A8;
  --linea:          #E8DFD2;
  --linea-soft:     #F0E8DC;
  --bianco:         #FFFFFF;
  --crema:          #FFFFFF;
  --crema-warm:     #FAFAFA;
  --bg-scuro:       #1F1D1B;

  /* type */
  --f-display:'Poppins','Helvetica Neue',Arial,sans-serif;
  --f-body:'Inter','Helvetica Neue',Arial,sans-serif;
  --f-serif:'Instrument Serif',Georgia,'Times New Roman',serif;

  /* spacing rhythm — tightened (was clamp(64px, 10vw, 120px), now -50%) */
  --pad-sez: clamp(32px, 5vw, 60px);
  --container: 1200px;
  --container-mid: 920px;
  --gap-grid: 32px;

  /* radii — alternated */
  --r-sm:4px;
  --r-md:10px;
  --r-lg:18px;

  /* motion */
  --ease:cubic-bezier(0.22,1,0.36,1);
}

/* ── reset ─────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{
  font-family:var(--f-body);
  font-size:16px; line-height:1.6; color:var(--antracite);
  background:var(--crema);
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
a{color:inherit;text-decoration:none}

/* ── typography ─────────────────────────────────────────────────────── */
h1,h2,h3,h4{font-family:var(--f-display); font-weight:700; color:var(--antracite); letter-spacing:-0.025em; line-height:1.0; text-wrap:balance}
h1{font-size:clamp(44px,7.4vw,96px); letter-spacing:-0.03em; line-height:0.95}
h2{font-size:clamp(32px,5.2vw,60px); letter-spacing:-0.025em; line-height:1.02}
h3{font-size:clamp(20px,2.4vw,26px); font-weight:600; line-height:1.15}
h4{font-size:18px; font-weight:600; line-height:1.2}
p{font-size:17px; line-height:1.6; color:var(--grigio-medio); text-wrap:pretty}
.serif{font-family:var(--f-serif); font-weight:400; font-style:italic; letter-spacing:0}
.eyebrow{
  font-family:var(--f-body); font-size:12px; font-weight:600;
  letter-spacing:0.18em; text-transform:uppercase; color:var(--rame);
  display:inline-flex; align-items:center; gap:10px;
}
.tnum{font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1}

/* ── paper texture / page background ───────────────────────────────── */
.has-texture body, body.has-texture{
  background-image:
    radial-gradient(at 12% 8%, rgba(181,118,42,0.06) 0px, transparent 45%),
    radial-gradient(at 85% 92%, rgba(253,98,32,0.05) 0px, transparent 50%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.35 0 0 0 0 0.20 0 0 0 0.045 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-attachment:fixed,fixed,fixed;
}

/* ── layout primitives ─────────────────────────────────────────────── */
.container{ max-width:var(--container); margin:0 auto; padding:0 24px }
.container-mid{ max-width:var(--container-mid); margin:0 auto; padding:0 24px }
section{ padding-top:var(--pad-sez); padding-bottom:var(--pad-sez) }
section.compact{ padding-top:64px; padding-bottom:64px }
.bg-crema{ background:var(--crema) }
.bg-crema-warm{ background:var(--crema-warm) }
.bg-arancio{ background:var(--arancio); color:var(--bianco) }
.bg-arancio h2,.bg-arancio h3{ color:var(--bianco) }
.bg-scuro{ background:var(--bg-scuro); color:var(--bianco); position:relative; overflow:hidden }
.bg-scuro h2,.bg-scuro h3{ color:var(--bianco) }
.bg-scuro::before{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:0.5;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.04 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.bg-scuro > *{ position:relative; z-index:1 }

/* ── scroll reveal ──────────────────────────────────────────────────── */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity 600ms var(--ease), transform 600ms var(--ease) }
.reveal.in{ opacity:1; transform:none }
@media (prefers-reduced-motion: reduce){
  .reveal,.reveal.in{ opacity:1; transform:none; transition:none }
  *,*::before,*::after{ animation:none !important; transition:none !important }
}

/* ── header ─────────────────────────────────────────────────────────── */
header.site-hdr{
  position:sticky; top:0; z-index:60;
  background:#FFFFFF;
  border-bottom:1px solid var(--linea);
}
.hdr-inner{
  display:flex; align-items:center; justify-content:space-between;
  max-width:var(--container); margin:0 auto; padding:14px 24px;
}
.hdr-logo{ display:flex; align-items:center; gap:12px }
.hdr-logo .hdr-mark{ height:36px; width:36px; flex-shrink:0; display:block }
.hdr-logo .hdr-type{ height:28px; width:auto; display:block }
@media (max-width: 600px){
  .hdr-logo{ gap:10px }
  .hdr-logo .hdr-mark{ height:32px; width:32px }
  .hdr-logo .hdr-type{ height:22px }
}
.hdr-logo img{ height:48px; width:auto; display:block }
@media (max-width: 600px){ .hdr-logo img{ height:40px } }
.hdr-meta{ display:none; font-size:13px; color:var(--grigio-medio) }
.hdr-meta strong{ color:var(--antracite); font-weight:600 }
.hdr-meta .dot{ display:inline-block; width:6px; height:6px; border-radius:50%; background:#22C55E; margin-right:6px; box-shadow:0 0 0 3px rgba(34,197,94,0.18) }
@media(min-width:760px){ .hdr-meta{ display:flex; align-items:center; gap:8px } }

/* ── button ─────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--f-display); font-weight:600; font-size:16px; line-height:1;
  padding:18px 28px; min-height:54px;
  border-radius:var(--r-md);
  border:1.5px solid transparent;
  transition:transform 200ms var(--ease), background 200ms var(--ease), color 200ms var(--ease), box-shadow 200ms var(--ease);
  letter-spacing:-0.005em;
  white-space:nowrap;
}
.btn .arrow{ transition:transform 200ms var(--ease) }
.btn:hover .arrow{ transform:translateX(3px) }

.btn-primary{
  background:var(--arancio); color:var(--bianco);
  box-shadow:0 1px 0 rgba(0,0,0,0.04), 0 8px 24px rgba(253,98,32,0.28);
}
.btn-primary:hover{ background:var(--arancio-dark); transform:scale(1.02); box-shadow:0 1px 0 rgba(0,0,0,0.04), 0 12px 30px rgba(253,98,32,0.34) }
.btn-primary:active{ transform:scale(0.99) }

.btn-ghost{
  background:transparent; color:var(--antracite); border-color:rgba(45,45,45,0.18);
}
.btn-ghost:hover{ border-color:var(--antracite); background:rgba(45,45,45,0.04) }

.btn-on-dark{
  background:var(--bianco); color:var(--antracite);
}
.btn-on-dark:hover{ background:var(--crema); transform:scale(1.02) }

.btn-wa{
  background:#25D366; color:var(--bianco);
}
.btn-wa:hover{ background:#1FB955; transform:scale(1.02) }

.btn-block{ display:flex; width:100% }
.btn-sm{ padding:12px 18px; min-height:42px; font-size:14px }
.btn-lg{ padding:22px 36px; min-height:62px; font-size:18px }

/* ── HERO (variant A — split / editorial) ──────────────────────────── */
.hero{
  position:relative;
  padding:clamp(48px,9vw,110px) 0 clamp(56px,8vw,90px);
  overflow:hidden;
}
.hero-grid{
  display:grid; grid-template-columns:1fr; gap:48px;
  max-width:1280px; margin:0 auto; padding:0 24px;
  align-items:center;
}
@media(min-width:960px){
  .hero-grid{ grid-template-columns:1.15fr 0.85fr; gap:72px }
}
.hero-eyebrow{ margin-bottom:22px }
.hero-h1{ margin-bottom:24px }
.hero-h1 em{ font-family:var(--f-serif); font-style:italic; font-weight:400; color:var(--arancio); letter-spacing:-0.01em; padding-right:6px }
.hero-sub{
  font-size:clamp(18px,1.6vw,21px); line-height:1.5; color:var(--antracite-soft);
  max-width:540px; margin-bottom:34px; font-weight:400;
}
.hero-sub strong{ color:var(--antracite); font-weight:600 }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:24px }
.hero-micro{ font-size:13px; color:var(--grigio-medio); display:flex; align-items:center; gap:8px }
.hero-micro .pulse{
  width:8px; height:8px; border-radius:50%; background:#22C55E;
  box-shadow:0 0 0 0 rgba(34,197,94,0.5); animation:pulse 2s infinite var(--ease);
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(34,197,94,0.55)}
  70%{box-shadow:0 0 0 10px rgba(34,197,94,0)}
  100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}
}

/* hero stagger */
.hero-stagger > *{ opacity:0; transform:translateY(18px); animation:hr 700ms var(--ease) forwards }
.hero-stagger > *:nth-child(1){ animation-delay:80ms }
.hero-stagger > *:nth-child(2){ animation-delay:200ms }
.hero-stagger > *:nth-child(3){ animation-delay:340ms }
.hero-stagger > *:nth-child(4){ animation-delay:480ms }
.hero-stagger > *:nth-child(5){ animation-delay:620ms }
@keyframes hr{ to{ opacity:1; transform:none } }
@media (prefers-reduced-motion: reduce){
  .hero-stagger > *{ opacity:1; transform:none; animation:none }
}

/* hero visual A — paper card stack */
.hero-visual{ position:relative; aspect-ratio:1/1.05; max-width:520px; margin:0 auto; width:100% }
.hv-card{
  position:absolute; border-radius:var(--r-lg); overflow:hidden;
  background:var(--bianco); box-shadow:0 30px 60px -20px rgba(45,45,45,0.22), 0 8px 20px -6px rgba(45,45,45,0.10);
}
.hv-main{
  inset:0;
  background:
    radial-gradient(circle at 70% 30%, rgba(253,98,32,0.16) 0%, transparent 55%),
    linear-gradient(155deg, #E8C99A 0%, #B5762A 100%);
}
.hv-main::after{
  content:''; position:absolute; inset:0; mix-blend-mode:overlay; opacity:0.5;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.18 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.hv-photo-label{
  position:absolute; left:24px; top:24px;
  background:rgba(255,255,255,0.94); backdrop-filter:blur(8px);
  border-radius:100px; padding:8px 14px;
  font-size:12px; font-weight:600; color:var(--antracite);
  letter-spacing:-0.005em;
  display:inline-flex; align-items:center; gap:8px;
}
.hv-photo-label::before{ content:''; width:8px; height:8px; border-radius:50%; background:var(--arancio) }

.hv-cup{
  position:absolute; inset:auto 0 0 0; display:flex; align-items:flex-end; justify-content:center;
  height:64%; padding:0 0 12%;
}
.hv-cup svg{ width:70%; height:auto; filter:drop-shadow(0 16px 30px rgba(0,0,0,0.18)) }

.hv-img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; object-position:center;
  display:block;
}
.hv-main:has(.hv-img){
  background:#1F1D1B;
}
.hv-main:has(.hv-img)::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.18) 100%);
}

/* WhatsApp floating card */
.hv-wa{
  position:absolute; right:-8px; bottom:-22px;
  width:min(280px, 78%);
  background:var(--bianco); border-radius:14px;
  padding:14px 16px;
  box-shadow:0 24px 40px -8px rgba(45,45,45,0.25);
  transform:rotate(-2.2deg);
  border:1px solid rgba(0,0,0,0.04);
}
.hv-wa-head{ display:flex; align-items:center; gap:10px; margin-bottom:10px }
.hv-wa-av{ width:30px; height:30px; border-radius:50%; background:var(--bianco); padding:3px; flex-shrink:0; display:flex; align-items:center; justify-content:center; box-shadow:inset 0 0 0 1px rgba(0,0,0,0.06) }
.hv-wa-av img{ width:100%; height:100%; object-fit:contain; display:block }
.hv-wa-name{ font-size:13px; font-weight:600; color:var(--antracite) }
.hv-wa-sta{ font-size:11px; color:#22C55E; font-weight:500 }
.hv-wa-bub{
  background:#DCF8C6; border-radius:14px 14px 4px 14px; padding:8px 12px;
  font-size:14px; color:var(--antracite); align-self:flex-end;
  font-family:var(--f-serif); font-style:italic;
}
.hv-wa-time{ font-size:10px; color:var(--grigio-chiaro); text-align:right; margin-top:3px }

/* corner stamp */
.hv-stamp{
  position:absolute; left:-14px; top:46%;
  width:96px; height:96px; border-radius:50%;
  background:var(--antracite); color:var(--bianco);
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  font-family:var(--f-serif); font-style:italic; font-size:14px; line-height:1.05;
  text-align:center;
  transform:rotate(-12deg);
  box-shadow:0 12px 28px rgba(0,0,0,0.18);
  border:2px solid var(--bianco);
  outline:1px dashed rgba(255,255,255,0.4); outline-offset:-8px;
}
.hv-stamp strong{ font-family:var(--f-display); font-weight:700; font-style:normal; font-size:28px; letter-spacing:-0.02em; display:block }

/* HERO variant B — full-bleed orange */
.hero.is-b{ background:var(--arancio); color:var(--bianco) }
.hero.is-b::before{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:0.35;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 0.6 0 0 0 0 0.3 0 0 0 0.15 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.hero.is-b .hero-eyebrow{ color:rgba(255,255,255,0.85) }
.hero.is-b .hero-eyebrow::before{ background:rgba(255,255,255,0.6) }
.hero.is-b h1{ color:var(--bianco) }
.hero.is-b .hero-h1 em{ color:#FFE0CC }
.hero.is-b .hero-sub{ color:rgba(255,255,255,0.92) }
.hero.is-b .hero-sub strong{ color:var(--bianco) }
.hero.is-b .btn-primary{ background:var(--bianco); color:var(--antracite); box-shadow:0 8px 24px rgba(0,0,0,0.18) }
.hero.is-b .btn-primary:hover{ background:var(--crema) }
.hero.is-b .btn-ghost{ color:var(--bianco); border-color:rgba(255,255,255,0.5) }
.hero.is-b .btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,0.1) }
.hero.is-b .hero-micro{ color:rgba(255,255,255,0.8) }
.hero.is-b .hv-stamp{ background:var(--bianco); color:var(--arancio); outline-color:rgba(253,98,32,0.4) }

/* ── trust pills bar ────────────────────────────────────────────────── */
.trust-bar{
  border-top:1px solid var(--linea); border-bottom:1px solid var(--linea);
  background:var(--crema-warm);
  padding:22px 24px;
}
.trust-row{
  max-width:var(--container); margin:0 auto;
  display:flex; flex-wrap:wrap; gap:18px 36px;
  align-items:center; justify-content:center;
}
.trust-item{
  display:inline-flex; align-items:center; gap:10px;
  font-size:14px; color:var(--antracite); font-weight:500;
}
.trust-item .num{
  font-family:var(--f-display); font-weight:700; color:var(--arancio); font-size:18px;
}
.trust-sep{ width:1px; height:24px; background:var(--rame); opacity:0.3; display:none }
@media(min-width:720px){ .trust-sep{ display:block } }

/* ── section header pattern ────────────────────────────────────────── */
.sec-head{ max-width:680px; margin-bottom:56px }
.sec-head.center{ margin-left:auto; margin-right:auto; text-align:center }
.sec-head h2{ margin-top:18px; margin-bottom:18px }
.sec-head h2 em{ font-family:var(--f-serif); font-style:italic; font-weight:400; color:var(--arancio); padding-right:4px }
.bg-arancio .sec-head h2 em{ color:#FFE0CC }
.bg-scuro .sec-head h2 em{ color:#FFB680 }
.sec-head p{ font-size:18px; line-height:1.5 }
.bg-arancio .sec-head p, .bg-scuro .sec-head p{ color:rgba(255,255,255,0.78) }

/* ── vantaggi (3 punti) ────────────────────────────────────────────── */
.vantaggi{ padding:36px 0 }
@media(min-width:760px){ .vantaggi{ padding:44px 0 } }
.vantaggi-grid{
  max-width:var(--container); margin:0 auto; padding:0 24px;
  display:grid; grid-template-columns:1fr; gap:24px;
}
@media(min-width:760px){ .vantaggi-grid{ grid-template-columns:repeat(3,1fr); gap:36px } }
.v-item{ display:flex; align-items:flex-start; gap:14px }
.v-icon{
  width:42px; height:42px; border-radius:50%;
  background:rgba(255,255,255,0.16); border:1.5px solid rgba(255,255,255,0.28);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  color:var(--bianco);
}
.v-item strong{ display:block; font-family:var(--f-display); font-weight:700; font-size:16px; color:var(--bianco); margin-bottom:4px; line-height:1.25 }
.v-item span{ font-size:14px; color:rgba(255,255,255,0.82); line-height:1.5 }

/* ── il solito (whatsapp scene) ────────────────────────────────────── */
.solito-grid{
  max-width:var(--container); margin:0 auto; padding:0 24px;
  display:grid; grid-template-columns:1fr; gap:48px; align-items:center;
}
@media(min-width:880px){ .solito-grid{ grid-template-columns:1.05fr 0.95fr; gap:80px } }
.solito-quote{
  font-family:var(--f-serif); font-style:italic; font-weight:400;
  font-size:clamp(28px,3.4vw,44px); line-height:1.15; color:var(--bianco);
  margin:24px 0 18px; letter-spacing:-0.01em;
  text-wrap:balance;
}
.solito-quote .accent{ color:#FFB680 }
.solito p{ color:rgba(255,255,255,0.7); font-size:17px; line-height:1.55 }
.solito-meta{ font-size:13px; color:rgba(255,255,255,0.45); margin-top:18px; letter-spacing:0.04em; text-transform:uppercase; font-weight:500 }

/* whatsapp mockup */
.wa{
  background:var(--bianco); border-radius:18px; overflow:hidden;
  max-width:340px; margin:0 auto;
  box-shadow:0 30px 60px -10px rgba(0,0,0,0.45), 0 6px 12px rgba(0,0,0,0.18);
}
.wa-bar{ background:#075E54; padding:14px 18px; display:flex; align-items:center; gap:12px }
.wa-av{ width:38px; height:38px; border-radius:50%; background:var(--bianco); padding:4px; flex-shrink:0; display:flex; align-items:center; justify-content:center }
.wa-av img{ width:100%; height:100%; object-fit:contain; display:block }
.wa-meta{ display:flex; flex-direction:column; gap:1px; line-height:1.15 }
.wa-bar h4{ color:#fff; font-size:14px; font-weight:600; margin:0; line-height:1.2 }
.wa-bar small{ color:rgba(255,255,255,0.7); font-size:11.5px; display:inline-flex; align-items:center; gap:6px; line-height:1.2 }
.wa-dot{ width:7px; height:7px; border-radius:50%; background:#22C55E; display:inline-block }
.wa-chat{ background:#ECE5DD; padding:16px 14px; display:flex; flex-direction:column; gap:10px; min-height:240px; position:relative }
.wa-chat::before{
  content:''; position:absolute; inset:0; opacity:0.12; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><path d='M0 20 Q10 0 20 20 T40 20' fill='none' stroke='%2300543d' stroke-width='0.5'/></svg>");
}
.wa-bub{ max-width:80%; padding:9px 13px; font-size:14px; line-height:1.45; border-radius:12px; position:relative; z-index:1; color:#111B21 }
.wa-bub.out{ background:#DCF8C6; align-self:flex-end; border-radius:14px 14px 4px 14px }
.wa-bub.in{ background:#fff; align-self:flex-start; border-radius:14px 14px 14px 4px; box-shadow:0 1px 2px rgba(0,0,0,0.06) }
.wa-bub strong, .wa-bub .serif{ color:inherit }
.wa-bub time{ display:block; font-size:10px; color:#999; margin-top:3px; text-align:right }
.wa-foot{ background:#F0F0F0; padding:9px; font-size:11px; color:#888; text-align:center; font-style:italic }

/* ── steps ─────────────────────────────────────────────────────────── */
.steps-grid{
  display:grid; grid-template-columns:1fr; gap:32px;
}
@media(min-width:840px){ .steps-grid{ grid-template-columns:repeat(3,1fr); gap:48px } }
.step{ position:relative }
.step-num{
  font-family:var(--f-serif); font-style:italic; font-weight:400;
  font-size:88px; line-height:0.8; color:var(--arancio);
  margin-bottom:18px; letter-spacing:-0.04em;
  display:block;
}
.step h3{ margin-bottom:10px; font-size:20px }
.step p{ font-size:15px; line-height:1.55; color:var(--grigio-medio) }
.step p strong{ color:var(--antracite); font-weight:600 }
.step-divider{
  display:none; position:absolute; right:-24px; top:24px;
  width:48px; height:1px;
  background:linear-gradient(90deg, var(--rame) 0%, transparent 100%);
}
@media(min-width:840px){
  .step:not(:last-child) .step-divider{ display:block }
}

/* ── pricing ───────────────────────────────────────────────────────── */
.pricing-wrap{ max-width:var(--container-mid); margin:0 auto; padding:0 24px }
.pricing-card{
  background:var(--bianco); border:1px solid var(--linea);
  border-radius:var(--r-lg); overflow:hidden;
  box-shadow:0 6px 24px rgba(45,45,45,0.04);
}
.pricing-head{
  background:var(--antracite); color:var(--bianco);
  padding:32px 32px 24px;
  display:flex; flex-direction:column; gap:6px;
}
@media(min-width:680px){
  .pricing-head{ flex-direction:row; align-items:flex-end; justify-content:space-between }
}
.pricing-head .lbl{ font-size:13px; letter-spacing:0.12em; text-transform:uppercase; color:var(--rame-soft); font-weight:600 }
.pricing-head h3{ color:var(--bianco); font-size:24px; margin-top:6px; font-weight:700 }
.pricing-head .from{ font-family:var(--f-serif); font-style:italic; color:rgba(255,255,255,0.65); font-size:14px; margin-top:6px }
.pricing-head .from strong{ font-family:var(--f-display); font-style:normal; color:#FFB680; font-weight:700; font-size:32px; letter-spacing:-0.02em; display:inline-block; margin-right:4px }

.pricing-rows{ padding:8px 8px }
.pricing-row{
  display:grid; grid-template-columns:1fr auto; align-items:center;
  padding:18px 24px; border-radius:var(--r-md);
  border-bottom:1px solid var(--linea-soft); gap:16px;
}
.pricing-row:last-child{ border-bottom:0 }
.pricing-row strong{ display:block; font-size:15px; color:var(--antracite); font-weight:600; margin-bottom:2px }
.pricing-row span{ font-size:13px; color:var(--grigio-medio); line-height:1.5 }
.pricing-amount{
  font-family:var(--f-display); font-weight:700; font-size:20px;
  color:var(--arancio); letter-spacing:-0.01em; white-space:nowrap;
}
.pricing-amount.muted{ color:var(--grigio-medio); font-weight:600; font-size:15px }
.pricing-amount.zero{ color:var(--antracite) }

.pricing-foot{
  background:var(--crema); padding:22px 32px; border-top:1px solid var(--linea);
  display:flex; flex-direction:column; gap:14px;
  align-items:flex-start;
}
@media(min-width:680px){ .pricing-foot{ flex-direction:row; align-items:center; justify-content:space-between } }
.pricing-foot p{ font-size:13px; color:var(--grigio-medio); margin:0; max-width:380px }
.pricing-foot p strong{ color:var(--antracite) }

/* ── territorio ────────────────────────────────────────────────────── */
.terr-grid{
  display:grid; grid-template-columns:1fr; gap:48px; align-items:start;
}
@media(min-width:880px){ .terr-grid{ grid-template-columns:1fr 1fr; gap:80px } }
.terr-photo{
  position:relative; aspect-ratio:4/5; border-radius:var(--r-lg); overflow:hidden;
  background:var(--antracite);
  box-shadow:0 30px 60px -16px rgba(45,45,45,0.28);
}
.terr-photo img{ width:100%; height:100%; object-fit:cover; opacity:0.94 }
.terr-photo::after{
  content:''; position:absolute; inset:auto 0 0 0; height:55%;
  background:linear-gradient(0deg, rgba(0,0,0,0.7) 0%, transparent 100%);
}
.terr-photo-cap{
  position:absolute; left:24px; right:24px; bottom:24px; z-index:1;
  color:var(--bianco);
}
.terr-photo-cap .lbl{ font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:#FFB680; margin-bottom:6px; font-weight:600 }
.terr-photo-cap p{ color:rgba(255,255,255,0.95); font-size:15px; line-height:1.5; margin:0; font-family:var(--f-serif); font-style:italic; font-size:18px }

.terr-body p{ font-size:17px; line-height:1.65; margin-bottom:18px }
.terr-body p strong{ color:var(--antracite); font-weight:600 }
.terr-pull{
  font-family:var(--f-serif); font-style:italic; font-weight:400;
  font-size:clamp(22px,2.6vw,30px); line-height:1.25;
  color:var(--antracite); border-left:3px solid var(--arancio);
  padding-left:24px; margin:32px 0;
}
.terr-pull cite{ display:block; font-style:normal; font-family:var(--f-body); font-size:13px; font-weight:600; color:var(--rame); margin-top:14px; letter-spacing:0.06em; text-transform:uppercase }

.partner-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:24px }
.tag{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--bianco); border:1px solid var(--linea);
  border-radius:100px; padding:7px 14px;
  font-size:13px; font-weight:500; color:var(--antracite);
}
.tag::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--rame) }

/* ── form section ──────────────────────────────────────────────────── */
.form-sec{ position:relative; overflow:hidden }
.form-sec::before{
  content:''; position:absolute; inset:auto -10% -30% 50%;
  width:80%; height:90%; pointer-events:none;
  background:radial-gradient(circle at center, rgba(253,98,32,0.10) 0%, transparent 70%);
  filter:blur(20px);
}
.form-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1fr; gap:48px;
  max-width:var(--container); margin:0 auto; padding:0 24px;
}
@media(min-width:960px){ .form-grid{ grid-template-columns:1fr 1.1fr; gap:80px; align-items:start } }
.form-side h2{ font-size:clamp(32px,4.4vw,48px); margin-bottom:20px }
.form-side h2 em{ font-family:var(--f-serif); font-style:italic; font-weight:400; color:var(--arancio) }
.form-side p{ font-size:17px; line-height:1.6; margin-bottom:28px; color:var(--bianco); opacity:0.78 }
.form-side .check{ display:flex; align-items:flex-start; gap:14px; margin-bottom:14px; color:rgba(255,255,255,0.88); font-size:15px; line-height:1.5 }
.form-side .check svg{ width:20px; height:20px; flex-shrink:0; color:var(--arancio); margin-top:2px }

.form-card{
  background:var(--bianco); border-radius:var(--r-lg);
  padding:32px 28px;
  box-shadow:0 24px 60px -12px rgba(0,0,0,0.4);
  position:relative;
}
.form-card-head{ margin-bottom:22px }
.form-card-head .lbl{ font-size:12px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--rame); margin-bottom:8px; display:block }
.form-card-head h3{ font-size:22px; line-height:1.2; color:var(--antracite); margin-bottom:6px }

.row{ display:grid; grid-template-columns:1fr; gap:14px; margin-bottom:14px }
@media(min-width:520px){ .row.two{ grid-template-columns:1fr 1fr } }
.field label{ display:block; font-size:12px; font-weight:600; color:var(--antracite); margin-bottom:6px; letter-spacing:0.02em }
.field label .req{ color:var(--arancio); margin-left:2px }
.field input, .field select{
  width:100%; height:50px; padding:0 14px;
  border:1.5px solid var(--linea); border-radius:var(--r-md);
  font-family:var(--f-body); font-size:16px; color:var(--antracite);
  background:var(--bianco);
  transition:border 200ms var(--ease), box-shadow 200ms var(--ease);
  -webkit-appearance:none; appearance:none;
}
.field select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%232D2D2D' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat; background-position:right 16px center; padding-right:38px;
}
.field input:focus, .field select:focus{
  outline:none; border-color:var(--arancio);
  box-shadow:0 0 0 4px rgba(253,98,32,0.14);
}
.field.is-valid input, .field.is-valid select{ border-color:#22A34A }
.field.is-valid input:focus, .field.is-valid select:focus{ box-shadow:0 0 0 4px rgba(34,163,74,0.18) }
.field.is-error input, .field.is-error select{ border-color:#D6422A; background-color:#FFF5F2 }
.field.is-error input:focus, .field.is-error select:focus{ box-shadow:0 0 0 4px rgba(214,66,42,0.18) }
.field-msg{ font-size:12px; color:#D6422A; margin-top:6px; display:none; align-items:center; gap:6px }
.field.is-error .field-msg{ display:flex }

/* radio group */
.interesse{ margin:18px 0 22px }
.interesse > span{ display:block; font-size:12px; font-weight:600; letter-spacing:0.02em; color:var(--antracite); margin-bottom:10px }
.interesse-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px }
.opt input{ position:absolute; opacity:0; pointer-events:none }
.opt label{
  display:flex; flex-direction:column; gap:4px;
  padding:14px 14px;
  border:1.5px solid var(--linea); border-radius:var(--r-md);
  background:var(--crema); cursor:pointer;
  transition:border 200ms var(--ease), background 200ms var(--ease), transform 200ms var(--ease);
  position:relative;
}
.opt label::before{
  content:''; position:absolute; right:12px; top:12px;
  width:18px; height:18px; border-radius:50%;
  border:1.5px solid var(--grigio-chiaro); background:var(--bianco);
  transition:all 200ms var(--ease);
}
.opt label::after{
  content:''; position:absolute; right:18px; top:18px;
  width:6px; height:6px; border-radius:50%;
  background:var(--bianco); opacity:0; transition:opacity 200ms var(--ease);
}
.opt input:checked + label{
  border-color:var(--arancio); background:var(--arancio-soft);
}
.opt input:checked + label::before{ border-color:var(--arancio); background:var(--arancio) }
.opt input:checked + label::after{ opacity:1 }
.opt input:focus-visible + label{ box-shadow:0 0 0 4px rgba(253,98,32,0.18) }
.opt label strong{ font-family:var(--f-display); font-weight:600; font-size:14px; color:var(--antracite); padding-right:30px; line-height:1.2 }
.opt label span{ font-size:12px; color:var(--grigio-medio); line-height:1.4 }

/* consensi GDPR */
.consents{ margin:6px 0 18px; display:flex; flex-direction:column; gap:10px }
.consent-row{
  display:flex; align-items:flex-start; gap:10px;
  font-size:13px; line-height:1.5; color:var(--grigio-medio);
}
.consent-row input[type="checkbox"]{
  flex-shrink:0; width:18px; height:18px; margin:1px 0 0; cursor:pointer;
  accent-color:var(--arancio);
}
.consent-row label{ cursor:pointer; user-select:none }
.consent-row label .req{ color:var(--arancio); font-weight:600 }
.consent-row a{ color:var(--rame); text-decoration:underline; text-underline-offset:2px }
.consent-row a:hover{ color:var(--arancio) }
.consent-row.is-error label{ color:#D6422A }
.consent-row.is-error input[type="checkbox"]{ outline:2px solid #D6422A; outline-offset:2px }

/* honeypot — invisibile a utenti umani */
.hp-field{
  position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important;
  overflow:hidden; pointer-events:none;
}

.form-submit{ width:100%; margin-top:8px }
.form-submit[disabled]{ opacity:0.55; pointer-events:none; cursor:not-allowed }
.form-submit[disabled]{ background:var(--grigio-medio); box-shadow:none }
.form-hint{
  font-size:12px; color:var(--grigio-medio); text-align:center;
  margin-top:10px; line-height:1.4;
  transition:opacity 220ms var(--ease), max-height 220ms var(--ease), margin 220ms var(--ease);
  max-height:30px; overflow:hidden;
}
.form-hint.hidden{ opacity:0; max-height:0; margin-top:0; pointer-events:none }
.form-foot{
  margin-top:14px; padding-top:14px;
  display:flex; align-items:center; gap:10px;
  font-size:12px; color:var(--grigio-medio); border-top:1px solid var(--linea);
}
.form-foot svg{ width:14px; height:14px; flex-shrink:0; color:var(--rame) }

/* form success */
.form-success{ display:none; text-align:center; padding:24px 8px }
.form-success.show{ display:block; animation:fadeup 500ms var(--ease) }
@keyframes fadeup{ from{ opacity:0; transform:translateY(12px) } to{ opacity:1; transform:none } }
.form-success-icon{
  width:72px; height:72px; border-radius:50%; background:#E7F8EC;
  display:flex; align-items:center; justify-content:center; margin:0 auto 18px;
  position:relative;
}
.form-success-icon svg{ width:36px; height:36px; color:#22A34A; stroke-dasharray:30; stroke-dashoffset:30; animation:check 500ms var(--ease) 200ms forwards }
@keyframes check{ to{ stroke-dashoffset:0 } }
.form-success h3{ font-size:24px; margin-bottom:10px }
.form-success p{ font-size:15px; color:var(--grigio-medio); max-width:340px; margin:0 auto 22px }

/* ── faq ──────────────────────────────────────────────────────────── */
.faq-list{ display:flex; flex-direction:column; gap:0 }
.faq{
  border-bottom:1px solid var(--linea);
}
.faq:first-child{ border-top:1px solid var(--linea) }
.faq summary{
  list-style:none; cursor:pointer;
  padding:24px 0;
  display:flex; align-items:center; justify-content:space-between;
  gap:18px;
  font-family:var(--f-display); font-weight:600; font-size:18px;
  color:var(--antracite); transition:color 200ms var(--ease);
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary:hover{ color:var(--arancio) }
.faq-toggle{
  width:32px; height:32px; border-radius:50%;
  border:1.5px solid var(--linea);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; transition:all 200ms var(--ease); position:relative;
}
.faq-toggle::before, .faq-toggle::after{
  content:''; position:absolute; background:var(--antracite);
  border-radius:1px;
}
.faq-toggle::before{ width:12px; height:1.5px }
.faq-toggle::after{ width:1.5px; height:12px; transition:transform 200ms var(--ease) }
.faq[open] .faq-toggle{ background:var(--arancio); border-color:var(--arancio) }
.faq[open] .faq-toggle::before, .faq[open] .faq-toggle::after{ background:var(--bianco) }
.faq[open] .faq-toggle::after{ transform:rotate(90deg) }
.faq-body{ padding:0 0 28px; max-width:760px; font-size:16px; line-height:1.65; color:var(--grigio-medio) }

/* ── final CTA ─────────────────────────────────────────────────────── */
.final-cta{
  background:var(--arancio); color:var(--bianco);
  position:relative; overflow:hidden;
}
.final-cta::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(255,255,255,0.18) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(0,0,0,0.20) 0%, transparent 50%);
}
.final-cta-inner{
  position:relative; z-index:1;
  max-width:var(--container-mid); margin:0 auto; padding:0 24px;
  text-align:center;
}
.final-cta h2{ font-size:clamp(40px,6vw,76px); color:var(--bianco); margin-bottom:24px; letter-spacing:-0.03em }
.final-cta h2 em{ font-family:var(--f-serif); font-style:italic; font-weight:400; color:#FFE0CC }
.final-cta p{ font-size:19px; color:rgba(255,255,255,0.92); max-width:560px; margin:0 auto 36px }

/* ── footer ────────────────────────────────────────────────────────── */
footer{
  background:var(--bg-scuro); color:rgba(255,255,255,0.6);
  padding:48px 24px 36px;
  position:relative; overflow:hidden;
}
.foot-grid{
  max-width:var(--container); margin:0 auto;
  display:grid; grid-template-columns:1fr; gap:32px;
}
@media(min-width:720px){ .foot-grid{ grid-template-columns:1.4fr 1fr 1fr } }
.foot-brand img{ height:64px; width:auto; margin-bottom:20px; display:block }
.foot-brand p{ font-size:13px; color:rgba(255,255,255,0.5); line-height:1.6; max-width:340px }
.foot-col h5{ font-family:var(--f-display); font-weight:600; font-size:13px; color:var(--bianco); letter-spacing:0.08em; text-transform:uppercase; margin-bottom:16px }
.foot-col ul{ list-style:none; display:flex; flex-direction:column; gap:8px }
.foot-col a{ font-size:14px; color:rgba(255,255,255,0.6); transition:color 200ms var(--ease) }
.foot-col a:hover{ color:var(--arancio) }

/* ── footer (extended) ─────────────────────────────────────────────── */
.foot-claim{
  font-size:14px; color:rgba(255,255,255,0.7); line-height:1.55; max-width:300px;
  margin:0 0 24px;
}
.foot-claim .serif{ color:rgba(255,255,255,0.95); font-style:italic; font-size:18px }

.foot-socials{ display:flex; gap:10px; flex-wrap:wrap }
.foot-socials a{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px 8px 12px;
  border:1px solid rgba(255,255,255,0.16);
  border-radius:999px;
  font-size:13px; color:rgba(255,255,255,0.85);
  transition:border-color 200ms var(--ease), background 200ms var(--ease), color 200ms var(--ease);
}
.foot-socials a:hover{
  border-color:var(--arancio); background:rgba(232,90,30,0.08); color:#fff;
}
.foot-socials svg{ flex-shrink:0; opacity:0.85 }

.foot-addr{ list-style:none; display:flex; flex-direction:column; gap:14px; margin:0; padding:0 }
.foot-addr li{
  display:flex; flex-direction:column; gap:4px;
  font-size:14px; color:rgba(255,255,255,0.78); line-height:1.5;
}
.foot-tag{
  font-family:var(--f-display);
  font-size:11px; letter-spacing:0.1em; text-transform:uppercase;
  color:rgba(255,255,255,0.4); font-weight:500;
}
.foot-link{ color:rgba(255,255,255,0.85)!important; font-size:14px!important; transition:color 200ms var(--ease) }
.foot-link:hover{ color:var(--arancio)!important }
.foot-bottom{
  max-width:var(--container); margin:32px auto 0; padding-top:24px;
  border-top:1px solid rgba(255,255,255,0.08);
  display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center;
}
.foot-bottom p{ font-size:12px; color:rgba(255,255,255,0.35); margin:0 }
.foot-bottom .legal{ display:flex; gap:18px }
.foot-bottom .legal a{ font-size:12px; color:rgba(255,255,255,0.45) }

/* ── sticky CTA mobile (floating button, scroll-triggered) ─────────── */
.sticky-cta{
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  padding:0 16px 14px;
  pointer-events:none; /* container is transparent — only the button is clickable */
  /* hidden until user has scrolled past one full viewport height */
  opacity:0; transform:translateY(24px);
  transition:opacity 320ms var(--ease), transform 320ms var(--ease);
}
.sticky-cta.visible{ opacity:1; transform:none }
.sticky-cta .btn{
  pointer-events:auto;
  box-shadow:0 14px 36px rgba(253,98,32,0.40), 0 4px 10px rgba(45,45,45,0.16);
}
/* Sticky CTA hides on desktop. On mobile we expand the dark footer's
   padding-bottom (instead of body's) so the cream body background never
   appears underneath the floating button — no white empty strip. */
@media(max-width:760px){
  .sticky-cta{ display:block }
  footer{ padding-bottom: calc(36px + 88px) }
}

/* ── HERO trust pills ───────────────────────────────────────────────── */
.hero-pills{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:26px }
.hero-pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 14px; border-radius:999px;
  font-size:13px; font-weight:500; line-height:1.2;
  border:1.5px solid transparent;
}
.pill-arancio{ background:var(--arancio-soft); color:var(--arancio-deep); border-color:rgba(253,98,32,0.25) }
.pill-rame{ background:var(--rame-soft); color:var(--rame-dark); border-color:rgba(181,118,42,0.28) }
.pill-antracite{ background:#EFE9DE; color:var(--antracite); border-color:rgba(45,45,45,0.18) }
.hero.is-b .hero-pill{ background:rgba(255,255,255,0.16); color:#fff; border-color:rgba(255,255,255,0.32) }

/* ── conferma note (steps) ──────────────────────────────────────────── */
.conf-note{
  margin-top:48px; padding:18px 22px;
  border-left:3px solid var(--rame); background:var(--rame-soft);
  border-radius:0 var(--r-md) var(--r-md) 0;
  font-size:14px; color:var(--antracite); line-height:1.6;
  max-width:760px;
}
.conf-note strong{ color:var(--rame-dark); font-weight:600 }

/* ── benefits 2x3 ───────────────────────────────────────────────────── */
.benefits-grid{
  display:grid; grid-template-columns:1fr; gap:24px 36px;
  margin-bottom:56px;
}
@media(min-width:680px){ .benefits-grid{ grid-template-columns:1fr 1fr } }
@media(min-width:980px){ .benefits-grid{ grid-template-columns:repeat(3,1fr) } }
.benefit{ display:flex; align-items:flex-start; gap:14px }
.benefit .dot{
  width:10px; height:10px; border-radius:50%;
  background:var(--arancio); flex-shrink:0; margin-top:7px;
  box-shadow:0 0 0 4px rgba(253,98,32,0.14);
}
.benefit strong{ display:block; font-family:var(--f-display); font-weight:600; font-size:16px; color:var(--antracite); margin-bottom:3px; line-height:1.25 }
.benefit span{ font-size:14px; color:var(--grigio-medio); line-height:1.55 }

/* ── card Aloia ─────────────────────────────────────────────────────── */
.aloia-card{
  display:grid; grid-template-columns:1fr; gap:24px;
  padding:32px;
  background:var(--rame-soft);
  border:1px solid rgba(181,118,42,0.28);
  border-radius:var(--r-lg);
  align-items:center;
}
@media(min-width:760px){ .aloia-card{ grid-template-columns:1fr auto; gap:48px; padding:40px 48px } }
.aloia-body .lbl{ font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--rame-dark); font-weight:600; display:block; margin-bottom:10px }
.aloia-body h3{ font-size:24px; line-height:1.2; color:var(--antracite); margin-bottom:10px }
.aloia-body p{ font-size:15px; color:var(--antracite-soft); line-height:1.6; max-width:560px; margin:0 }
.aloia-mark{
  width:180px; height:120px; border-radius:var(--r-md);
  background:var(--bianco);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  padding:14px 18px;
  box-shadow:0 4px 16px rgba(45,45,45,0.06), inset 0 0 0 1px rgba(181,118,42,0.18);
}
.aloia-mark img{ max-width:100%; max-height:100%; height:auto; width:auto; display:block; object-fit:contain }

/* ── coffee store gallery ───────────────────────────────────────────── */
.store-head{
  display:grid; grid-template-columns:1fr; gap:24px;
  margin-bottom:48px;
  align-items:end;
}
@media(min-width:880px){
  .store-head{ grid-template-columns:1.1fr 0.9fr; gap:64px }
}
.store-head h2{ margin-top:18px; font-size:clamp(32px,4.6vw,52px); line-height:1.02 }
.store-head h2 em{ font-family:var(--f-serif); font-style:italic; font-weight:400; color:var(--arancio) }
.store-head p{ font-size:17px; line-height:1.6; max-width:520px }
.store-head p strong{ color:var(--antracite); font-weight:600 }

/* mobile: scroll-snap horizontal carousel + auto-slide every 5s.
   desktop: editorial mosaic with tile-tall/tile-wide spans + dense flow
   so empty cells get filled regardless of photo count. */
.store-mosaic{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:80%;
  gap:12px;
  overflow-x:auto;
  overflow-y:visible;
  scroll-snap-type:x mandatory;
  scroll-padding-left:24px;
  scroll-padding-right:24px;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  padding:4px 24px 18px;
  margin:0 -24px;
  scrollbar-width:none;
}
.store-mosaic::-webkit-scrollbar{ display:none }

.store-tile{
  position:relative; overflow:hidden;
  border-radius:var(--r-md);
  background:var(--linea);
  aspect-ratio:4/5;
  margin:0;
  cursor:default;
  scroll-snap-align:center;
}
.store-tile img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 600ms var(--ease);
}
.store-tile:hover img{ transform:scale(1.04) }
.store-tile figcaption{
  position:absolute; left:16px; right:16px; bottom:16px;
  display:flex; flex-direction:column; gap:2px;
  color:#fff;
  text-shadow:0 1px 12px rgba(0,0,0,0.4);
  z-index:1;
  opacity:1; transform:none;
  transition:opacity 300ms var(--ease), transform 300ms var(--ease);
}
.store-tile::after{
  content:''; position:absolute; inset:auto 0 0 0; height:55%;
  background:linear-gradient(0deg, rgba(0,0,0,0.6) 0%, transparent 100%);
  opacity:1;
  transition:opacity 300ms var(--ease);
}

@media(min-width:680px){
  .store-mosaic{
    grid-auto-flow:dense;
    grid-template-columns:repeat(6, 1fr);
    grid-auto-rows:200px;
    grid-auto-columns:auto;
    overflow-x:visible;
    scroll-snap-type:none;
    padding:0;
    margin:0;
    gap:14px;
  }
  /* default: each tile spans 2 of 6 cols (= 3-col rhythm) */
  .store-tile{ aspect-ratio:auto; grid-column:span 2 }
  /* hero tile: tall portrait (left side, 2 rows) */
  .store-tile.tile-tall{ grid-column:span 2; grid-row:span 2 }
  /* wide editorial banners */
  .store-tile.tile-wide{ grid-column:span 4 }
  /* the last tile fills the remaining row width — no empty cells at the
     bottom of the mosaic regardless of total photo count */
  .store-tile:last-child{ grid-column:1 / -1 }

  /* desktop: hover-to-reveal caption (more editorial) */
  .store-tile figcaption{ opacity:0; transform:translateY(8px) }
  .store-tile::after{ opacity:0 }
  .store-tile:hover::after, .store-tile:hover figcaption,
  .store-tile:focus-within::after, .store-tile:focus-within figcaption{
    opacity:1; transform:none;
  }
}

@media(min-width:1080px){
  .store-mosaic{ grid-auto-rows:240px; gap:16px }
}
.store-tile figcaption .lbl{
  font-family:var(--f-display); font-weight:600; font-size:11px;
  letter-spacing:0.16em; text-transform:uppercase;
  color:#FFB680;
}
.store-tile figcaption span:not(.lbl){
  font-size:14px; line-height:1.35; font-weight:500;
  color:rgba(255,255,255,0.95);
}

/* ── strip numeri ───────────────────────────────────────────────────── */
.strip-numeri{
  padding:44px 0;
  position:relative;
}
.strip-numeri::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,182,128,0.3), transparent);
}
.strip-head{ max-width:680px; margin-bottom:56px }
.strip-title{
  font-size:clamp(28px,3.6vw,44px); color:var(--bianco);
  margin-top:18px; line-height:1.05; letter-spacing:-0.02em;
}
.strip-title em{ font-family:var(--f-serif); font-style:italic; font-weight:400; color:#FFB680 }

.strip-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:48px 32px;
  position:relative;
}
@media(min-width:760px){ .strip-grid{ grid-template-columns:repeat(4,1fr); gap:32px } }

.strip-item{
  display:flex; flex-direction:column; gap:10px;
  align-items:flex-start;
  position:relative;
  padding-top:24px;
}
.strip-item::before{
  content:''; position:absolute; left:0; top:0;
  width:32px; height:2px; background:#FFB680;
}
.sn-num{
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(48px, 5.6vw, 72px);
  color:var(--bianco);
  letter-spacing:-0.04em; line-height:0.92;
  display:inline-flex; align-items:baseline; gap:1px;
}
.sn-num sup{
  font-size:0.45em; vertical-align:super; line-height:0;
  color:#FFB680; font-weight:600; margin-left:2px;
  position:relative; top:-0.4em;
}
.sn-num small{
  font-family:var(--f-serif); font-style:italic; font-weight:400;
  font-size:0.42em; color:rgba(255,255,255,0.6);
  margin-left:2px;
}
.sn-num .dash{ color:rgba(255,255,255,0.4); font-weight:400; padding:0 2px }
.sn-lbl{
  font-size:13px; color:rgba(255,255,255,0.65);
  line-height:1.5; max-width:220px;
  letter-spacing:0.01em;
}

/* ── testimonianze ──────────────────────────────────────────────────── */
.testi-grid{
  display:grid; grid-template-columns:1fr; gap:24px; margin-bottom:48px;
}
@media(min-width:760px){ .testi-grid{ grid-template-columns:1fr 1fr; gap:32px } }
.testi{
  background:var(--bianco); border:1px solid var(--linea);
  border-top:3px solid var(--rame);
  border-radius:0 0 var(--r-lg) var(--r-lg);
  padding:28px 28px 24px;
  display:flex; flex-direction:column; gap:16px;
  box-shadow:0 4px 20px rgba(45,45,45,0.04);
}
.testi-head{ display:flex; align-items:center; gap:12px }
.testi-av{
  width:42px; height:42px; border-radius:50%;
  background:var(--rame-soft); color:var(--rame-dark);
  font-family:var(--f-display); font-weight:700; font-size:16px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.testi-head strong{ display:block; font-family:var(--f-display); font-weight:600; font-size:15px; color:var(--antracite); line-height:1.25 }
.testi-head span{ font-size:12px; color:var(--grigio-medio) }
.testi p{
  font-family:var(--f-serif); font-style:italic; font-weight:400;
  font-size:18px; line-height:1.5; color:var(--antracite-soft);
  margin:0;
}
.testi-tag{
  align-self:flex-start;
  font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--rame-dark); font-weight:600;
  padding:5px 10px; border-radius:999px;
  background:var(--rame-soft);
}

.big-stat{
  text-align:center; padding:32px 24px;
  border-top:1px solid var(--linea);
}
.big-stat-num{
  display:block;
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(64px,9vw,120px); color:var(--arancio);
  line-height:0.9; letter-spacing:-0.04em;
  margin-bottom:8px;
}
.big-stat-lbl{ display:block; font-size:18px; color:var(--antracite); font-weight:600; margin-bottom:4px }
.big-stat-sub{ display:block; font-family:var(--f-serif); font-style:italic; font-size:16px; color:var(--grigio-medio) }

/* ── garanzie ───────────────────────────────────────────────────────── */
.garanzie-grid{
  display:grid; grid-template-columns:1fr; gap:20px;
}
@media(min-width:760px){ .garanzie-grid{ grid-template-columns:repeat(3,1fr); gap:24px } }
.gar{
  background:var(--bianco); border:1px solid var(--linea);
  border-radius:var(--r-lg); padding:28px;
  display:flex; flex-direction:column; gap:14px;
  position:relative; overflow:hidden;
}
.gar h3{ font-size:18px; color:var(--antracite); line-height:1.25 }
.gar p{ font-size:14px; line-height:1.6; color:var(--grigio-medio); margin:0 }
.gar-icon{
  width:48px; height:48px; border-radius:12px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.gar-arancio .gar-icon{ background:var(--arancio-soft); color:var(--arancio-deep) }
.gar-rame .gar-icon{ background:var(--rame-soft); color:var(--rame-dark) }
.gar-antracite .gar-icon{ background:#EFE9DE; color:var(--antracite) }

.gar-foot{
  margin-top:32px; padding:22px 28px;
  border-left:3px solid var(--rame);
  background:var(--bianco);
  border-radius:0 var(--r-md) var(--r-md) 0;
  max-width:760px;
}
.gar-foot .serif{
  font-family:var(--f-serif); font-style:italic; font-weight:400;
  font-size:20px; color:var(--antracite); line-height:1.45;
}

/* ── cartone misto ──────────────────────────────────────────────────── */
.cartone-grid{
  display:grid; grid-template-columns:1fr; gap:32px; align-items:center;
}
@media(min-width:880px){ .cartone-grid{ grid-template-columns:1.2fr 0.8fr; gap:64px } }
.cartone-body h2{ margin:18px 0 18px }
.cartone-body h2 em{ font-family:var(--f-serif); font-style:italic; font-weight:400; color:var(--arancio) }
.cartone-body > p{ font-size:17px; line-height:1.6; max-width:540px; margin-bottom:28px }

.badge-discount{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--arancio); color:var(--bianco);
  padding:7px 14px; border-radius:999px;
  font-family:var(--f-display); font-weight:600; font-size:13px;
  letter-spacing:0.04em;
  text-transform:uppercase;
}

.cart-tastes{ display:grid; grid-template-columns:1fr 1fr; gap:14px; max-width:540px }
.taste{
  border-radius:var(--r-md); padding:18px;
  display:flex; flex-direction:column; gap:6px;
  border:1px solid var(--linea);
}
.taste strong{ font-family:var(--f-display); font-weight:600; font-size:15px; color:var(--antracite) }
.taste span{ font-size:13px; color:var(--grigio-medio); line-height:1.4 }
.taste-circle{
  width:36px; height:36px; border-radius:50%;
  margin-bottom:6px;
  box-shadow:inset 0 -8px 16px rgba(0,0,0,0.18);
}
.taste-light{ background:linear-gradient(155deg, #F5E6CC 0%, #E8C99A 100%) }
.taste-light .taste-circle{ background:radial-gradient(circle at 30% 30%, #C9A878 0%, #8E5C1F 100%) }
.taste-dark{ background:linear-gradient(155deg, #4A3220 0%, #2A1810 100%); border-color:rgba(0,0,0,0.2) }
.taste-dark strong{ color:#FFE8DA }
.taste-dark span{ color:rgba(255,232,218,0.7) }
.taste-dark .taste-circle{ background:radial-gradient(circle at 30% 30%, #6B3F1E 0%, #1F0F08 100%) }

.cartone-cta{
  background:var(--bianco); border:1px solid var(--linea);
  border-radius:var(--r-lg); padding:32px 28px;
  text-align:center;
  box-shadow:0 12px 36px rgba(45,45,45,0.06);
}
.cartone-cta .lbl{ display:block; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--rame); font-weight:600; margin-bottom:14px }
.cart-discount{ margin-bottom:22px }
.cart-discount span:first-child{
  font-family:var(--f-display); font-weight:700;
  font-size:64px; color:var(--arancio);
  line-height:0.9; letter-spacing:-0.03em;
  display:block; margin-bottom:8px;
}
.cart-discount small{ display:block; font-size:13px; color:var(--grigio-medio); line-height:1.5 }
.cart-foot{ margin-top:14px; font-size:12px; color:var(--grigio-medio) }

/* ── density tweak ─────────────────────────────────────────────────── */
.density-compact section{ padding-top:64px; padding-bottom:64px }
.density-compact .hero{ padding:48px 0 48px }
.density-compact .sec-head{ margin-bottom:36px }

/* ── legal pages (privacy / cookie / termini) ──────────────────────── */
.legal-page{ padding:clamp(48px, 7vw, 96px) 0 clamp(48px, 6vw, 80px) }
.legal-container{ max-width:760px; margin:0 auto; padding:0 24px }
.legal-page .eyebrow{ margin-bottom:16px }
.legal-page h1{
  font-size:clamp(36px, 5vw, 56px); letter-spacing:-0.025em; line-height:1.05;
  margin-bottom:18px; text-wrap:balance;
}
.legal-page .legal-lead{
  font-size:18px; line-height:1.55; color:var(--antracite-soft);
  margin-bottom:14px; max-width:640px;
}
.legal-page .legal-updated{
  font-size:13px; color:var(--grigio-medio); font-family:var(--f-body);
  letter-spacing:0.02em; margin-bottom:48px;
  padding-bottom:24px; border-bottom:1px solid var(--linea);
}
.legal-page section{ padding:0; margin-bottom:40px }
.legal-page section h2{
  font-size:clamp(20px, 2.4vw, 26px); font-weight:600;
  margin-bottom:16px; line-height:1.2;
  padding-top:8px;
  position:relative;
}
.legal-page section h2::before{
  content:''; position:absolute; left:0; top:-8px;
  width:32px; height:2px; background:var(--rame); opacity:0.55;
}
.legal-page p{
  font-size:16px; line-height:1.7; color:var(--antracite-soft);
  margin-bottom:14px;
}
.legal-page p strong, .legal-page li strong{ color:var(--antracite); font-weight:600 }
.legal-page a{
  color:var(--rame-dark); text-decoration:underline;
  text-decoration-thickness:1px; text-underline-offset:3px;
  transition:color 200ms var(--ease);
}
.legal-page a:hover{ color:var(--arancio) }
.legal-page ul, .legal-page ol{
  margin:0 0 14px 22px; padding:0;
  font-size:16px; line-height:1.7; color:var(--antracite-soft);
}
.legal-page ul li, .legal-page ol li{ margin-bottom:8px }
.legal-page ul ul, .legal-page ol ol{ margin-top:8px; margin-bottom:8px }
.legal-page dl{ margin:0 0 14px; padding:0 }
.legal-page dt{
  font-family:var(--f-display); font-weight:600;
  color:var(--antracite); font-size:15px;
  margin-top:14px; margin-bottom:4px;
}
.legal-page dd{
  margin:0 0 8px 0; padding-left:0;
  font-size:15px; line-height:1.65; color:var(--antracite-soft);
}
.legal-page code{
  font-family:'SFMono-Regular', Menlo, Consolas, monospace;
  font-size:0.9em; background:var(--linea-soft);
  padding:1px 6px; border-radius:4px; color:var(--antracite);
}
.legal-page time{ font-variant-numeric:tabular-nums }
.legal-page .legal-back{
  margin-top:56px; padding-top:24px; border-top:1px solid var(--linea);
  font-size:14px;
}
.legal-page .legal-back a{ color:var(--rame); text-decoration:none; font-weight:500 }
.legal-page .legal-back a:hover{ color:var(--arancio) }

/* cookie table (cookie.html) */
.cookie-table{
  border:1px solid var(--linea); border-radius:var(--r-md);
  overflow:hidden; margin:14px 0 18px;
  background:var(--bianco);
}
.cookie-row{
  display:grid; grid-template-columns:1fr; gap:6px;
  padding:14px 16px; border-bottom:1px solid var(--linea-soft);
  font-size:14px; line-height:1.5;
}
.cookie-row:last-child{ border-bottom:0 }
.cookie-row-head{
  background:var(--crema-warm);
  font-family:var(--f-display); font-weight:600; font-size:11px;
  text-transform:uppercase; letter-spacing:0.12em;
  color:var(--rame-dark);
}
@media(min-width:680px){
  .cookie-row{ grid-template-columns:1.4fr 1.2fr 2.4fr 1fr; gap:14px; align-items:start }
}

/* ── cookie banner ─────────────────────────────────────────────────── */
.cookie-banner{
  position:fixed; left:50%; bottom:16px; transform:translateX(-50%);
  z-index:80;
  width:calc(100% - 24px); max-width:720px;
  background:rgba(255,255,255,0.96); backdrop-filter:blur(14px);
  border:1px solid var(--linea); border-radius:var(--r-md);
  padding:16px 18px;
  box-shadow:0 14px 40px -12px rgba(45,45,45,0.22), 0 4px 12px rgba(45,45,45,0.08);
  animation:cb-slide 360ms var(--ease);
}
.cookie-banner[hidden]{ display:none }
@keyframes cb-slide{
  from{ opacity:0; transform:translate(-50%, 18px) }
  to{ opacity:1; transform:translate(-50%, 0) }
}
.cookie-banner-inner{
  display:flex; flex-direction:column; gap:14px;
  align-items:stretch;
}
@media(min-width:680px){
  .cookie-banner-inner{ flex-direction:row; align-items:center; gap:18px }
}
.cookie-banner-text{ flex:1; min-width:0 }
.cookie-banner strong{
  display:block; font-family:var(--f-display); font-weight:600;
  font-size:14px; color:var(--antracite); margin-bottom:4px; line-height:1.2;
}
.cookie-banner p{
  font-size:13px; line-height:1.5; color:var(--grigio-medio);
  margin:0;
}
.cookie-banner p a{ color:var(--rame); text-decoration:underline; text-underline-offset:2px }
.cookie-banner p a:hover{ color:var(--arancio) }
.cookie-banner .btn{ flex-shrink:0; white-space:nowrap }
@media(max-width:760px){
  /* alza la sticky CTA per non sovrapporsi al banner cookie */
  body.has-cookie-banner .sticky-cta{ bottom:calc(var(--cb-height, 96px) + 8px) }
}

/* ── responsive fixes ────────────────────────────────────────────────── */
/* prevent grid blowout: grid items have default min-width:auto which
   refuses to shrink below the content min-content, causing column overflow
   on narrow viewports when content is wide (h1, tabular numerics, etc.). */
.hero-grid > *,
.hero-stagger > *,
.solito-grid > *,
.steps-grid > *,
.benefits-grid > *,
.store-head > *,
.store-mosaic > *,
.strip-grid > *,
.terr-grid > *,
.garanzie-grid > *,
.form-grid > *,
.cartone-grid > *,
.cart-tastes > *,
.aloia-card > *,
.foot-grid > *,
.testi-grid > *,
.interesse-grid > *,
.vantaggi-grid > *,
.cookie-row > *,
.row > * { min-width: 0 }

/* hero typography: leave more breathing room on very narrow phones */
@media (max-width: 380px){
  .hero-h1{ font-size: 38px; letter-spacing: -0.02em }
  .hero-sub{ font-size: 16px }
  .hero-pill{ font-size: 12px; padding: 6px 12px }
}

/* hero CTA: stack full-width on mobile so the long label never gets
   clipped (the .btn nowrap rule otherwise blows past viewport edge). */
@media (max-width: 520px){
  .hero-actions{ flex-direction: column; align-items: stretch; gap: 10px }
  .hero-actions .btn{ width: 100%; justify-content: center }
  .hero-actions .btn-lg{
    padding: 18px 22px;
    font-size: 16px;
    min-height: 56px;
  }
}

/* header CTA: short label + tighter padding on small phones so the
   logotype and the button never overlap. Two spans switched via CSS:
   `btn-text-full` on >=481px, `btn-text-short` on <=480px. */
.site-hdr .btn .btn-text-short{ display:none }
@media (max-width: 480px){
  .site-hdr .hdr-inner{ padding: 12px 14px; gap: 10px }
  .site-hdr .btn-sm{ padding: 9px 12px; font-size: 13px; min-height: 38px; gap: 6px }
  .site-hdr .btn .btn-text-full{ display:none }
  .site-hdr .btn .btn-text-short{ display:inline }
}
/* very small phones: hide logotype, keep only pictogram so the CTA always
   has comfortable breathing room */
@media (max-width: 360px){
  .site-hdr .hdr-type{ display:none }
}

/* prevent lateral overflow on the whole document */
html, body{ max-width: 100vw }
img, svg{ max-width: 100% }
.solito-quote, .strip-title, .hero-h1, .sec-head h2{ overflow-wrap: break-word; word-break: break-word }

/* footer: stack columns earlier on small phones to avoid cramped layout */
@media (max-width: 480px){
  footer{ padding-top: 36px; padding-left: 20px; padding-right: 20px }
  .foot-bottom{ flex-direction: column; align-items: flex-start; gap: 12px }
  .foot-bottom .legal{ flex-wrap: wrap }
}

/* form section: tighten outer paddings on mobile so form-card doesn't
   fight with sticky CTA + cookie banner stacking */
@media (max-width: 480px){
  .form-sec .form-grid{ padding: 0 16px }
  .form-card{ padding: 24px 18px }
  .pricing-wrap{ padding: 0 16px }
  .pricing-head{ padding: 22px 20px 18px }
  .pricing-row{ padding: 14px 18px }
  .pricing-foot{ padding: 18px 20px }
}

/* hero visual: keep the floating WhatsApp card from poking past the
   document edge on very small screens (.hv-wa right:-8px + rotation) */
@media (max-width: 480px){
  .hv-wa{ right: 4px; transform: rotate(-1.5deg) }
  .hv-stamp{ left: -4px; width: 78px; height: 78px; font-size: 12px }
  .hv-stamp strong{ font-size: 22px }
}

/* mosaic gallery: 2-col on mid-mobile so tiles don't go too tall */
@media (min-width: 480px) and (max-width: 679px){
  .store-mosaic{ grid-template-columns: 1fr 1fr; grid-auto-rows: 180px }
  .store-tile, .store-tile.tile-tall, .store-tile.tile-wide{ aspect-ratio: auto }
}