/* Giuria Gusto — sito prodotto. Direzione «The product performs», Switzer, grafite e arancio. */
:root {
  --bg: #18191b;
  --surface: #222427;
  --surface-2: #2b2d31;
  --ink: #eff0f1;
  --muted: #a6a8ad;
  --accent: #ff4a1f;
  --accent-ink: #18191b;
  --field: #eff0f1;
  --field-2: #e2e4e7;
  --field-ink: #18191b;
  --field-muted: #4f5257;

  /* interfaccia del prodotto (tema chiaro) */
  --ui-bg: #ffffff;
  --ui-line: #d9dbe0;
  --ui-ink: #1c1d20;
  --ui-muted: #5d6067;
  --ui-ok: #1f8a4c;
  --ui-warn: #c23a12;
  --ui-sel: #fff1ec;

  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(2rem, 1.3rem + 3.2vw, 4rem);
  --step-hero: clamp(2.5rem, 1.2rem + 4.6vw, 5.5rem);

  --m: clamp(20px, 3.2vw, 48px);
  --gap: clamp(96px, 10vw, 160px);
  --r: 4px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: Switzer, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--step-body); line-height: 1.5; letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-weight: 600; letter-spacing: -0.04em; line-height: 0.98; margin: 0; text-wrap: balance; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent); color: var(--accent-ink); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* barra arancio e testata */
.bar { height: 8px; background: var(--accent); }
.top {
  display: flex; align-items: center; gap: 32px;
  padding: 22px var(--m); position: relative; z-index: 5;
}
.brand { font-weight: 600; font-size: 1.375rem; letter-spacing: -0.04em; text-decoration: none; margin-right: auto; }
.nav { display: flex; gap: 28px; }
.nav a { text-decoration: none; color: var(--ink); font-size: 1rem; }
.nav a:hover { color: var(--accent); }

/* pulsanti: rettangoli, un solo raggio */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px;
  padding: 0 24px; background: var(--accent); color: var(--accent-ink);
  border: 0; border-radius: var(--r); font: inherit; font-weight: 600; font-size: 1.0625rem;
  text-decoration: none; cursor: pointer;
  transition: transform .18s var(--ease), background-color .18s var(--ease);
}
.btn:hover { background: #ff6640; transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-sm { min-height: 44px; padding: 0 18px; font-size: 1rem; }
.btn-ink { background: var(--field-ink); color: var(--field); }
.btn-ink:hover { background: #000; }
.link { color: var(--ink); text-decoration: none; font-weight: 500; transition: color .18s; }
.link:hover { color: var(--accent); }

/* ===== HERO ===== */
.hero {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 96px); align-items: start;
  padding: clamp(40px, 7vw, 110px) var(--m) 120px;
}
.hero h1 { font-size: var(--step-hero); max-width: 13ch; }
.lead { font-size: var(--step-lead); line-height: 1.38; margin-top: 36px; max-width: 30ch; }
.acts { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 40px; }
.note { margin-top: 56px; max-width: 40ch; color: var(--muted); font-size: 1rem; }
.hero-ui { justify-self: end; width: 100%; max-width: 440px; }
.cap { margin-top: 18px; color: var(--muted); font-size: 1rem; max-width: 40ch; }

/* ===== interfaccia: scheda del giudice ===== */
[data-ui] { font-size: 15px; line-height: 1.4; letter-spacing: 0; color: var(--ui-ink); }
.sheet { background: var(--ui-bg); border-radius: 10px; padding: 20px; }
.sh-top { display: flex; justify-content: space-between; font-size: 13px; color: var(--ui-muted); }
.sh-cat { color: var(--ui-warn); font-weight: 600; }
.sh-pizza { margin: 12px 0 16px; display: flex; flex-direction: column; }
.sh-pizza strong { font-size: 24px; letter-spacing: -0.02em; }
.sh-pizza span { color: var(--ui-muted); font-size: 14px; }
.voce { border: 0; margin: 0 0 14px; padding: 12px 0 0; border-top: 1px solid var(--ui-line); } /* taste-skill-ignore: interfaccia del prodotto (data-ui) / campo modulo */
.voce legend { font-weight: 600; font-size: 15px; padding: 0; margin-bottom: 8px; float: left; width: 100%; }
.cells { display: grid; gap: 5px; clear: both; }
.cells.int { grid-template-columns: repeat(6, 1fr); margin-bottom: 6px; }
.cells.dec { grid-template-columns: repeat(10, 1fr); }
.cell {
  appearance: none; border: 1px solid var(--ui-line); background: #fff; color: var(--ui-ink); /* taste-skill-ignore: interfaccia del prodotto (data-ui) / campo modulo */
  border-radius: 6px; height: 40px; font: 600 16px/1 Switzer, Arial, sans-serif; cursor: pointer;
  transition: background-color .15s, border-color .15s, transform .12s;
}
.cells.dec .cell { height: 34px; font-size: 14px; font-weight: 500; border-style: dashed; }
.cell:hover { border-color: var(--ui-warn); }
.cell:active { transform: scale(.94); }
.cell[aria-checked="true"] { background: var(--ui-warn); border-color: var(--ui-warn); border-style: solid; color: #fff; }
.sh-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--ui-line); padding-top: 14px; } /* taste-skill-ignore: interfaccia del prodotto (data-ui) / campo modulo */
.sh-avg { display: flex; flex-direction: column; font-size: 13px; color: var(--ui-muted); }
.sh-avg output { font-size: 28px; font-weight: 600; color: var(--ui-ink); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.sh-send, .sh-again {
  border: 0; border-radius: 8px; background: var(--ui-ink); color: #fff; font: 600 15px Switzer, Arial, sans-serif;
  min-height: 46px; padding: 0 20px; cursor: pointer; transition: background-color .15s, transform .12s;
}
.sh-send:disabled { background: #6b6e75; color: #fff; cursor: not-allowed; }
.sh-send:not(:disabled):hover, .sh-again:hover { background: var(--ui-warn); }
.sh-again { margin-top: 14px; width: 100%; background: #fff; color: var(--ui-ink); border: 1px solid var(--ui-line); } /* taste-skill-ignore: interfaccia del prodotto (data-ui) / campo modulo */
.rank-h { display: flex; flex-direction: column; margin-bottom: 10px; }
.rank-h strong { font-size: 18px; }
.rank-h span { font-size: 13px; color: var(--ui-muted); }
.rank-l { list-style: none; margin: 0; padding: 0; counter-reset: r; }
.rank-l li {
  counter-increment: r; display: grid; grid-template-columns: 28px 1fr auto; align-items: center;
  padding: 10px 8px; border-top: 1px solid var(--ui-line); font-variant-numeric: tabular-nums; /* taste-skill-ignore: interfaccia del prodotto (data-ui) / campo modulo */
  transition: background-color .4s;
}
.rank-l li::before { content: counter(r) "°"; color: var(--ui-muted); font-size: 14px; }
.rank-l li b { font-weight: 600; }
.rank-l li.me { background: var(--ui-sel); }
.rank-l li.me b { color: var(--ui-warn); }
.sh-nojs { margin-top: 12px; color: var(--ui-muted); }

/* ===== MONDO: foto in dissolvenza ===== */
.world {
  background: var(--field); color: var(--field-ink);
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px);
  padding: var(--gap) var(--m); align-items: center;
}
.world-pic { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--field-2); }
.world-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.6s ease; transform: scale(1.04); }
.world-pic img.on { opacity: 1; animation: drift 9s ease-out both; }
@keyframes drift { from { transform: scale(1.08); } to { transform: scale(1.02); } }
.world h2 { font-size: var(--step-head); max-width: 14ch; }
.world-copy p { margin-top: 24px; max-width: 46ch; }
.facts { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 14px; }
.facts li { padding: 0; }
.facts b { font-weight: 600; }

/* ===== SHOWCASE ===== */
.show { padding: var(--gap) 0; background: var(--bg); position: relative; }
.show-top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; padding: 0 var(--m); align-items: end; margin-bottom: 56px; }
.show-hint { margin-top: 14px; color: var(--muted); font-size: 1rem; }
.show-h { font-size: var(--step-head); max-width: 16ch; }
.show-row {
  display: flex; gap: 6vw; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 8px calc(50vw - 210px); scrollbar-width: none; cursor: grab;
}
.show-row::-webkit-scrollbar { display: none; }
.show-row:focus-visible { outline-offset: -3px; }
.panel { flex: 0 0 420px; scroll-snap-align: center; opacity: .3; transition: opacity .35s var(--ease), transform .35s var(--ease); transform: scale(.94); }
.panel.on { opacity: 1; transform: none; }
.panel .ui { pointer-events: none; }
.panel.on .ui { pointer-events: auto; }
.show-txt { max-width: 520px; min-height: 9.5em; }
.show-txt h3 { font-size: 1.75rem; letter-spacing: -0.03em; }
.show-txt p { margin-top: 10px; color: var(--ink); }

.ui { background: var(--ui-bg); border-radius: 10px; padding: 18px; min-height: 260px; }
.ui-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; gap: 10px; }
.ui-h strong { font-size: 16px; }
.ui-h span { font-size: 13px; color: var(--ui-muted); }
.row { display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: 10px; padding: 11px 8px; border-top: 1px solid var(--ui-line); font-size: 14px; } /* taste-skill-ignore: interfaccia del prodotto (data-ui) / campo modulo */
.row em { font-style: normal; color: var(--ui-muted); font-size: 13px; }
.row.sel { background: var(--ui-sel); }
.dot { width: 9px; height: 9px; border-radius: 50%; background: #c3c6cc; }
.dot.ok { background: var(--ui-ok); }
.dot.warn { background: var(--ui-warn); }
.chip { display: inline-block; font-size: 13px; font-weight: 600; color: var(--ui-warn); border: 1px solid var(--ui-warn); border-radius: 6px; padding: 3px 9px; font-style: normal; } /* taste-skill-ignore: interfaccia del prodotto (data-ui) / campo modulo */
.chip.solid { background: var(--ui-ink); border-color: var(--ui-ink); color: #fff; padding: 9px 16px; }
.chip.ghost { color: var(--ui-ink); border-color: var(--ui-line); padding: 9px 16px; }
.ui-tv { background: #0f1012; color: #fff; display: flex; flex-direction: column; gap: 12px; }
.tv-h { font-size: 15px; color: #ff8a6a; font-weight: 600; }
.tv-n { display: flex; gap: 22px; font-size: 44px; font-weight: 600; letter-spacing: -0.03em; }
.tv-s { font-size: 14px; color: #c5c7cc; }
.tv-f { margin-top: auto; font-size: 13px; color: #c5c7cc; border-top: 1px solid #2c2e33; padding-top: 12px; } /* taste-skill-ignore: interfaccia del prodotto (data-ui) / campo modulo */
.ui-paper { background: #f4f5f4; font-size: 13px; }
.pp-h { display: flex; justify-content: space-between; border-bottom: 2px solid #1c1d20; padding-bottom: 8px; margin-bottom: 8px; }
.pp-h span { color: var(--ui-muted); }
.pp-r { padding: 8px 0; border-bottom: 1px solid #d6d3c9; } /* taste-skill-ignore: interfaccia del prodotto (data-ui) / campo modulo */
.pp-r > span { display: block; font-weight: 600; margin-bottom: 5px; }
.pp-c { display: flex; gap: 4px; margin-bottom: 4px; }
.pp-c i { font-style: normal; width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid #8d8a80; border-radius: 4px; font-size: 12px; } /* taste-skill-ignore: interfaccia del prodotto (data-ui) / campo modulo */
.pp-c.d i { border-style: dashed; width: 22px; }
.pp-c i.o { border: 2px solid #1a3fb0; border-radius: 50%; color: #1a3fb0; font-weight: 700; }
.pp-f { margin-top: 10px; color: var(--ui-muted); font-size: 12.5px; }
.ui-log .lg { display: grid; grid-template-columns: 46px 1fr; gap: 8px; padding: 10px 6px; border-top: 1px solid var(--ui-line); font-size: 14px; } /* taste-skill-ignore: interfaccia del prodotto (data-ui) */
.ui-log .lg em { font-style: normal; color: var(--ui-muted); font-variant-numeric: tabular-nums; }
.ui-log .lg.sel { background: var(--ui-sel); }
.f-l { display: block; font-size: 13px; font-weight: 600; margin: 12px 0 6px; }
.f-chk { display: flex; flex-wrap: wrap; gap: 6px; }
.ck { font-size: 13px; border: 1px solid var(--ui-line); border-radius: 6px; padding: 6px 10px; } /* taste-skill-ignore: interfaccia del prodotto (data-ui) / campo modulo */
.ck.on { border-color: var(--ui-warn); background: var(--ui-sel); color: var(--ui-warn); font-weight: 600; }
.f-in { border: 1px solid var(--ui-line); border-radius: 6px; padding: 10px; font-size: 14px; } /* taste-skill-ignore: interfaccia del prodotto (data-ui) / campo modulo */
.f-b { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

/* ===== COME FUNZIONA ===== */
.how { display: grid; grid-template-columns: 1fr 1fr; min-height: 88svh; position: relative; }
.how-l { background: var(--field); color: var(--field-ink); padding: clamp(56px, 7vw, 110px) var(--m) 180px; }
.how-clause { font-size: clamp(2.5rem, 4.6vw, 4.75rem); font-weight: 600; letter-spacing: -0.04em; line-height: 0.98; max-width: 13ch; min-height: 2em; transition: opacity .2s; }
.how-sub { margin-top: 28px; max-width: 34ch; font-size: var(--step-lead); line-height: 1.38; transition: opacity .2s; }
.how-r { background: var(--surface); display: grid; place-items: center; padding: 64px var(--m) 180px; }
.how-ui { width: 100%; max-width: 440px; background: var(--ui-bg); border-radius: 10px; padding: 18px; min-height: 300px; }
.st { animation: fadein .2s ease both; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
.big-ok { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; color: var(--ui-ok); padding: 14px 0 18px; }
.meter { height: 10px; background: #eceef1; border-radius: 5px; overflow: hidden; margin: 6px 0 12px; }
.meter span { display: block; height: 100%; background: var(--ui-warn); }
.how-ctl { position: absolute; left: var(--m); right: var(--m); bottom: 40px; }
.how-ctl input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 32px; background: transparent; cursor: pointer; }
.how-ctl input[type=range]::-webkit-slider-runnable-track { height: 8px; background: linear-gradient(var(--field-ink), var(--field-ink)) 0 / var(--p, 0%) 100% no-repeat, #b9bcc2; } /* taste-skill-ignore: interfaccia del prodotto (data-ui) / campo modulo */
.how-ctl input[type=range]::-moz-range-track { height: 8px; background: #b9bcc2; }
.how-ctl input[type=range]::-moz-range-progress { height: 8px; background: var(--field-ink); }
.how-ctl input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 32px; height: 32px; background: var(--accent); margin-top: -12px; border: 0; }
.how-ctl input[type=range]::-moz-range-thumb { width: 32px; height: 32px; background: var(--accent); border: 0; border-radius: 0; }
.how-names { list-style: none; margin: 10px 0 0; padding: 0; display: flex; justify-content: space-between; }
.how-names li { font-size: 1rem; color: var(--field-muted); cursor: pointer; }
.how-names li:nth-child(n+3) { color: #c9cbd0; }
.how-names li.on { color: var(--field-ink); font-weight: 600; }
.how-names li:nth-child(n+3).on { color: #fff; }

/* ===== PROVA ===== */
.proof { display: flex; align-items: center; gap: 40px; padding: 140px var(--m); }
.proof-h { font-size: 1.125rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1.3; color: var(--muted); white-space: nowrap; }
.proof-l { list-style: none; margin: 0; padding: 0; display: flex; flex: 1; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.proof-l li { font-size: 1.375rem; font-weight: 600; letter-spacing: -0.03em; }

/* ===== PREZZI ===== */
.price { background: var(--field); color: var(--field-ink); padding: var(--gap) var(--m); }
.ptable { width: 100%; border-collapse: collapse; table-layout: fixed; }
.ptable th, .ptable td { text-align: left; vertical-align: top; padding: 20px 18px; font-size: 1.25rem; line-height: 1.35; }
.ptable thead th { padding-top: 28px; padding-bottom: 28px; vertical-align: bottom; }
.ptable .p-first { width: 30%; padding-left: 0; }
.ptable .p-first h2 { font-size: var(--step-head); }
.p-name { display: block; font-size: clamp(1.5rem, 2.4vw, 2.5rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.02; }
.p-price { display: block; margin-top: 8px; font-size: 1.0625rem; color: var(--field-muted); }
.ptable tbody th { font-weight: 500; color: var(--field-muted); padding-left: 0; }
.ptable tbody tr:nth-child(even) th, .ptable tbody tr:nth-child(even) td { background: var(--field-2); }
.ptable tbody tr:nth-child(even) th { padding-left: 12px; }
.ptable .rec { background: var(--accent) !important; color: var(--accent-ink); }
.ptable .rec .p-price { color: var(--accent-ink); }
.p-act td, .p-act th { padding-top: 28px; padding-bottom: 28px; }
.p-act .btn { width: 100%; }
.p-act .btn:not(.btn-ink) { background: var(--field-ink); color: var(--field); }
.p-act .btn:not(.btn-ink):hover { background: #000; }
.p-note { margin-top: 32px; max-width: 60ch; font-size: 1.0625rem; }

/* ===== FAQ ===== */
.faq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 120px); padding: var(--gap) var(--m); align-items: start; }
.faq-h { font-size: 1.125rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1.3; color: var(--muted); margin-bottom: 18px; }
.faq-q { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.faq-q button {
  all: unset; box-sizing: border-box; display: flex; align-items: baseline; gap: 14px; width: 100%;
  padding: 9px 0; font-size: 1.125rem; color: var(--muted); cursor: pointer; transition: color .15s;
}
.faq-q button::before { content: ""; flex: 0 0 8px; height: 8px; border-radius: 50%; background: var(--muted); transform: translateY(-2px); transition: background-color .15s; }
.faq-q button:hover, .faq-q button[aria-selected="true"] { color: var(--ink); }
.faq-q button[aria-selected="true"]::before { background: var(--accent); }
.faq-q button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.faq-q .ans { display: none; }
.faq-r { position: sticky; top: 120px; }
.faq-a { font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.75rem); line-height: 1.3; max-width: 30ch; min-height: 7.8em; transition: opacity .15s; }
.faq-fig { margin: 40px 0 0; max-width: 520px; }
.faq-fig img { width: 100%; filter: saturate(.85); }
.faq-fig figcaption { margin-top: 10px; color: var(--muted); font-size: 1rem; }

/* ===== CONTATTO ===== */
.contact { padding: 200px var(--m) 160px; background: var(--surface); }
.contact > * { max-width: 560px; margin-left: calc(50% - 280px); }
.c-prompt { font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.75rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.25; }
.c-prompt span { display: block; color: var(--muted); }
.c-form { margin-top: 28px; }
.c-field { position: relative; }
.c-field input, .c-when {
  width: 100%; height: 64px; border: 0; border-radius: var(--r); background: var(--field); color: var(--field-ink);
  font: inherit; font-size: 1.125rem; padding: 0 70px 0 20px; outline: none;
}
.c-when { height: 52px; margin-top: 10px; font-size: 1rem; padding-right: 20px; background: var(--field-2); }
.c-field input:focus, .c-when:focus { box-shadow: inset 0 0 0 2px var(--accent); } /* taste-skill-ignore: interfaccia del prodotto (data-ui) / campo modulo */
.c-go {
  position: absolute; right: 10px; top: 10px; width: 44px; height: 44px; border-radius: 50%; border: 0;
  background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; cursor: pointer;
  transition: transform .15s var(--ease);
}
.c-go:hover { transform: translateX(3px); }
.c-next { margin-top: 16px; font-size: 1rem; color: var(--muted); }
.c-next.ok { color: var(--ink); }
.c-rows { margin-top: 72px; display: grid; gap: 14px; font-size: 1rem; }
.c-rows div { display: grid; grid-template-columns: 110px 1fr; }
.c-rows dt { color: var(--muted); }
.c-rows dd { margin: 0; }
.c-rows a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.c-rows a:hover { color: var(--accent); }

/* ===== FOOTER a tessere ===== */
.foot { display: grid; grid-template-columns: repeat(12, 1fr); gap: 8px; padding: 10px; background: var(--bg); }
.t { background: var(--surface); padding: 24px; min-height: 220px; display: flex; flex-direction: column; }
.t-state { grid-column: 1 / 5; justify-content: space-between; }
.t-state p { font-size: 1.5rem; letter-spacing: -0.02em; line-height: 1.25; max-width: 20ch; }
.t-state small { font-size: 0.8125rem; color: var(--muted); line-height: 1.5; }
.t-state small a { color: var(--ink); }
.t-nav { grid-column: 5 / 8; gap: 8px; }
.t-nav a { text-decoration: none; font-size: 1rem; }
.t-nav a:hover { color: var(--accent); }
.t-time { grid-column: 8 / 10; gap: 4px; }
.t-time strong { font-size: 2.25rem; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.t-time span { color: var(--muted); font-size: 1rem; }
.t-mail { grid-column: 10 / 13; justify-content: flex-end; }
.t-mail a { font-size: 1.25rem; text-decoration: none; }
.t-mail a:hover { color: var(--accent); }
.t-word { grid-column: 1 / 9; min-height: 320px; background: var(--ink); color: var(--bg); font-weight: 600; letter-spacing: -0.05em; line-height: .9; font-size: 9vw; display: grid; place-items: center; text-align: center; }
.t-go { grid-column: 9 / 13; min-height: 320px; background: var(--accent); color: var(--accent-ink); text-decoration: none; justify-content: space-between; transition: background-color .2s; }
.t-go span { font-size: 1.75rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; max-width: 10ch; }
.t-go svg { align-self: flex-end; transition: transform .25s var(--ease); }
.t-go:hover { background: #ff6640; }
.t-go:hover svg { transform: translate(6px, -6px); }

/* ===== entrate ===== */
.rv { opacity: 1; }
.js .rv { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .rv.in { opacity: 1; transform: none; }
.js .rv > * { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .rv.in > * { opacity: 1; transform: none; }
.js .rv.in > *:nth-child(2) { transition-delay: .08s; }
.js .rv.in > *:nth-child(3) { transition-delay: .16s; }
.js .rv.in > *:nth-child(4) { transition-delay: .24s; }
.js .rv.in > *:nth-child(5) { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) {
  .js .rv, .js .rv > * { opacity: 1; transform: none; transition: none; }
  .world-pic img.on { animation: none; }
  .world-pic img { transition: none; }
  .panel { transition: none; }
}

/* ===== tablet ===== */
@media (max-width: 1080px) {
  .hero { grid-template-columns: 1fr; }
  .hero-ui { justify-self: start; }
  .world { grid-template-columns: 1fr; }
  .faq { grid-template-columns: 1fr; }
  .faq-r { position: static; }
  .ptable th, .ptable td { font-size: 1.0625rem; padding: 16px 12px; }
  .ptable .p-first h2 { font-size: 2rem; }
  .show-top { grid-template-columns: 1fr; align-items: start; }
  .t-state { grid-column: 1 / 7; } .t-nav { grid-column: 7 / 13; }
  .t-time { grid-column: 1 / 7; } .t-mail { grid-column: 7 / 13; }
  .t-word { grid-column: 1 / 13; font-size: 13vw; } .t-go { grid-column: 1 / 13; min-height: 220px; }
}

/* ===== telefono ===== */
@media (max-width: 720px) {
  .nav { display: none; }
  .top { gap: 12px; padding: 16px var(--m); }
  .brand { font-size: 1.25rem; }
  .hero { padding-top: 32px; }
  .hero h1 { font-size: clamp(2.4rem, 11vw, 3.2rem); }
  .lead { margin-top: 24px; }
  .note { margin-top: 36px; }
  .hero-ui { max-width: none; }
  .sheet { padding: 16px; }
  .cells { gap: 4px; }
  .cell { height: 44px; }
  .cells.dec .cell { height: 40px; font-size: 13px; }

  .show { min-height: 0; }
  .show-row { padding: 8px 7vw; gap: 4vw; }
  .panel { flex: 0 0 86vw; }
  .show-txt { min-height: 0; }

  .how { grid-template-columns: 1fr; min-height: 0; }
  .how-r { order: 1; padding: 40px var(--m); }
  .how-ctl { position: static; order: 2; padding: 20px var(--m) 8px; background: var(--surface); }
  .how-ctl input[type=range]::-webkit-slider-thumb { width: 40px; height: 40px; margin-top: -16px; }
  .how-l { order: 3; padding: 40px var(--m) 72px; }
  .how-clause { font-size: 9vw; min-height: 0; }
  .how-names { display: none; }
  .how-names li, .how-names li:nth-child(n+3) { color: var(--muted); font-size: 15px; }
  .how-names li.on, .how-names li:nth-child(n+3).on { color: var(--ink); }

  .proof { flex-direction: column; align-items: flex-start; gap: 20px; padding: 100px var(--m); }
  .proof-l { flex-direction: column; gap: 14px; }

  .ptable, .ptable thead, .ptable tbody, .ptable tr, .ptable th, .ptable td { display: block; width: auto !important; }
  .ptable thead { display: none; }
  .ptable tbody tr { display: none; }
  .p-stack { display: grid; gap: 20px; margin-top: 40px; }
  .p-mob-h { font-size: var(--step-head); }

  .faq-r { display: none; }
  .faq-q .ans { display: block; padding: 4px 0 14px 22px; font-size: 1.1875rem; line-height: 1.4; color: var(--ink); }
  .faq-q .ans[hidden] { display: none; }

  .contact { padding: 120px var(--m) 100px; }
  .contact > * { margin-left: 0; max-width: none; }
  .c-field input { height: 60px; }
  .c-go { top: 8px; }
  .c-rows div { grid-template-columns: 1fr; gap: 2px; }

  .foot { grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px; }
  .t { padding: 20px; min-height: 150px; }
  .t-word { grid-column: 1 / 3; order: 1; min-height: 160px; font-size: 15vw; }
  .t-go { grid-column: 1 / 3; order: 2; min-height: 160px; }
  .t-nav { grid-column: 1 / 2; order: 3; } .t-mail { grid-column: 2 / 3; order: 4; }
  .t-time { grid-column: 1 / 3; order: 5; min-height: 0; } .t-state { grid-column: 1 / 3; order: 6; }
  .t-mail a { font-size: 1rem; word-break: break-all; }
}

/* blocchi prezzi per telefono, generati dallo script */
.p-stack { display: none; }
@media (max-width: 720px) {
  .p-stack { display: grid; }
  .p-block { background: var(--field-2); padding: 24px; border-radius: var(--r); margin-bottom: 28px; }
  .p-block.rec { background: var(--accent); }
  .p-block h3 { font-size: 9vw; letter-spacing: -0.04em; }
  .p-block .pp { color: var(--field-muted); margin-top: 6px; }
  .p-block.rec .pp { color: var(--accent-ink); }
  .p-block dl { margin: 18px 0 0; display: grid; gap: 12px; }
  .p-block dt { color: var(--field-muted); font-size: 1rem; }
  .p-block.rec dt { color: var(--accent-ink); opacity: .8; }
  .p-block dd { margin: 0; font-size: 1.0625rem; }
  .p-block .btn { width: 100%; margin-top: 20px; background: var(--field-ink); color: var(--field); }
}

/* esito del modulo */
.c-next.ok { color: var(--ink); }
.c-next.err { color: #ff8a6a; }

/* pagine di testo (privacy) */
.pagina { padding: clamp(48px, 8vw, 120px) var(--m) var(--gap); }
.pagina-testo { max-width: 68ch; }
.pagina-testo h1 { font-size: var(--step-head); margin-bottom: 40px; }
.pagina-corpo h2 { font-size: 1.5rem; letter-spacing: -0.02em; margin: 40px 0 12px; line-height: 1.2; }
.pagina-corpo p, .pagina-corpo ul { margin: 0 0 16px; }
.pagina-corpo a:hover { color: var(--accent); }
.brand, .btn { white-space: nowrap; }
@media (max-width: 380px) { .top .btn-sm { display: none; } }