/* ============================================================================
 * style.css — Look del check-up, impianto MagicUI.
 *
 * Gli effetti sono ripresi dai componenti di github.com/magicuidesign/magicui
 * e riscritti in CSS puro, perché quelli originali sono componenti React con
 * Tailwind e Framer Motion e qui non c'è nessun build. Stessa meccanica, stesso
 * risultato a schermo, zero dipendenze:
 *
 *   dot-pattern          → .cu-punti
 *   magic-card           → il faro che segue il mouse (cu-effetti.js)
 *   ripple-button        → l'onda al click (cu-effetti.js)
 *   shimmer-button       → .cu-avanti::after
 *   animated-shiny-text  → .cu-sezione
 *   blur-fade            → @keyframes blurFade, su .cu-blocco e sulle risposte
 *   number-ticker        → il contatore che scorre (cu-effetti.js)
 *   ripple               → i cerchi della schermata di attesa
 *
 * ⬇︎ PERSONALIZZA: le variabili qui sotto. Sotto le variabili non serve
 * toccare nulla. (Il font è caricato da cu-quiz.html: se lo cambi qui, cambia
 * anche il <link> lassù.)
 * ========================================================================== */

:root {
  /* UN solo accento, l'arancio del brand */
  --arancio: #F77E02;
  --arancio-scuro: #D46A00;
  --arancio-testo: #A85200;
  --arancio-rgb: 247, 126, 2;   /* serve per i gradienti trasparenti */

  --nero: #0B0B0C;
  --carbone: #33383D;
  --pietra: #8A9299;
  --linea: #E8EAED;
  --linea-forte: #D6DAE0;
  --punto: rgba(255, 255, 255, .30);   /* i puntini sopra l'arancio */
  --errore: #6B1200;

  /* testi sopra il pannello arancione */
  --su-arancio: #FFFFFF;
  --su-arancio-tenue: rgba(255, 255, 255, .9);

  --font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --raggio: 13px;               /* angoli delle risposte */
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { height: 100%; }

/* Aperto da solo, il quiz si porta dietro la sua fascia arancione.
 * Dentro la landing invece il fondo lo mette `.lp-form-section` (landing.css)
 * e qui si diventa trasparenti: vedi le regole `html.cu-incorniciato` in fondo. */
body {
  margin: 0;
  font-family: var(--font);
  color: var(--su-arancio);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  position: relative;

  /* stessi colori della fascia in landing.css: se ne cambi uno, cambialo lì */
  background: linear-gradient(125deg, #F77E02 0%, #FF9526 28%, #DC6E00 55%, #FF9E36 78%, #F77E02 100%);
  background-size: 300% 300%;
  animation: flusso 16s ease-in-out infinite;
}

@keyframes flusso {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Gli stessi due aloni della fascia in landing.css: uno schiarisce, uno
   approfondisce, con durate non divisibili fra loro così il disegno che
   formano insieme non si ripete mai uguale. Si vedono solo aprendo
   cu-quiz.html da solo — dentro la landing il fondo è quello della fascia. */
body::before,
body::after {
  content: '';
  position: fixed;
  pointer-events: none;
  border-radius: 50%;
  z-index: 0;
  will-change: transform;
}

body::before {
  width: 75vw; height: 75vw; max-width: 1000px; max-height: 1000px;
  top: -30%; left: -12%;
  background: radial-gradient(circle, rgba(255, 206, 138, .40) 0%, rgba(255, 170, 84, .16) 38%, transparent 68%);
  mix-blend-mode: screen;
  animation: aloneChiaro 34s ease-in-out infinite;
}

body::after {
  width: 65vw; height: 65vw; max-width: 850px; max-height: 850px;
  bottom: -28%; right: -10%;
  background: radial-gradient(circle, rgba(140, 56, 0, .38) 0%, rgba(140, 56, 0, .14) 40%, transparent 70%);
  mix-blend-mode: multiply;
  animation: aloneScuro 47s ease-in-out infinite;
}

@keyframes aloneChiaro {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  30%  { transform: translate3d(16vw, 9vh, 0) scale(1.16); }
  62%  { transform: translate3d(4vw, -7vh, 0) scale(.94); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes aloneScuro {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  38%  { transform: translate3d(-14vw, -8vh, 0) scale(1.12); }
  70%  { transform: translate3d(-5vw, 6vh, 0) scale(.96); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

/* ---- dot-pattern: griglia di puntini sfumata verso il basso ---- */

.cu-punti {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(var(--punto) 1px, transparent 1px);
  background-size: 16px 16px;
  /* la maschera fa svanire i puntini scendendo: restano solo in cima, dove
     accompagnano la domanda, e non disturbano la lettura delle risposte */
  -webkit-mask-image: radial-gradient(ellipse 90% 55% at 50% 0%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 90% 55% at 50% 0%, #000 20%, transparent 75%);
}

.cu-testata, .cu-scena, .cu-fondo { position: relative; z-index: 1; }

/* ---- testata ---- */

.cu-testata {
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  padding: 6px 20px 0;
}

.cu-riga {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  min-height: 30px;
}

.cu-marchio {
  font-weight: 600;
  font-size: 15px;
  color: var(--carbone);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
/* il logo è nero con gli occhiali arancioni: sopra l'arancio va sbiancato,
   come nella landing. Si vede solo aprendo cu-quiz.html da solo. */
.cu-marchio .cu-logo { height: 22px; width: auto; display: block; filter: brightness(0) invert(1); }

/* il ritorno alla domanda precedente: sta nella riga in fondo, accanto alla
   barra. Il motore ne governa la `visibility`, quindi alla prima domanda
   sparisce ma tiene il suo posto e la barra non si sposta. */
#cu-indietro {
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, .45);
  background: rgba(255, 255, 255, .16);
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .18s, border-color .18s, transform .18s;
}
#cu-indietro:hover { background: rgba(255, 255, 255, .32); border-color: #fff; transform: translateX(-2px); }

/* ---- avanzamento: sotto le risposte, barra + contatore ----
 * Sopra l'arancio la parte percorsa è bianca piena: un arancio su arancio non
 * si distinguerebbe. La pista è scavata nel fondo (nero trasparente) invece
 * che schiarita, altrimenti bianco-su-bianco-chiaro non si legge la differenza
 * fra fatto e da fare. */

/* il contatore: cu-effetti.js gli fa scorrere le cifre */
#cu-conta {
  flex: 0 0 auto;
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  letter-spacing: .02em;
}

/* Il gruppo "a che punto sono" sta a sinistra e non si allarga per tutta la
   riga: una barra lunga quanto la pagina sembra un elemento di sistema, corta
   sembra un'indicazione. */
.cu-avanzamento {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin-top: 32px;
}

#cu-pista {
  position: relative;
  flex: 0 1 240px;
  height: 8px;
  background: rgba(120, 52, 0, .28);
  border-radius: 999px;
  overflow: hidden;
}

#cu-barra {
  position: relative;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 10px rgba(255, 255, 255, .55);
  transition: width .55s cubic-bezier(.22, .9, .3, 1);
  overflow: hidden;
}

/* la luce che passa sulla parte già percorsa */
#cu-barra::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(var(--arancio-rgb), .6) 50%, transparent 80%);
  animation: sweep 2.6s cubic-bezier(.4, 0, .6, 1) infinite;
}

/* ---- schermate ---- */

.cu-scena {
  flex: 1;
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  padding: 30px 20px 40px;
  display: flex;
  flex-direction: column;
}

.cu-schermata { display: none; flex: 1; }
.cu-schermata.cu-attiva { display: flex; flex-direction: column; }

/* ---- blur-fade: tutto entra sfocato e si mette a fuoco ---- */

@keyframes blurFade {
  from { opacity: 0; filter: blur(7px); transform: translateY(10px); }
  to   { opacity: 1; filter: blur(0);   transform: none; }
}
@keyframes blurFadeBack {
  from { opacity: 0; filter: blur(7px); transform: translateY(-10px); }
  to   { opacity: 1; filter: blur(0);   transform: none; }
}

.cu-blocco { animation: blurFade .45s cubic-bezier(.22, .9, .3, 1); }
.cu-blocco.cu-da-sopra { animation-name: blurFadeBack; }

/* ---- animated-shiny-text: la sezione, con la luce che ci passa dentro ----
 * Il testo è semi-trasparente e il gradiente è ritagliato sulle lettere
 * (background-clip: text): è quello che nell'originale fa `bg-clip-text`. */

.cu-sezione {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  background-image: linear-gradient(90deg, transparent, #fff 50%, transparent);
  background-size: 90px 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  animation: shinyText 4s cubic-bezier(.6, .6, 0, 1) infinite;
  margin: 0 0 14px;
}

@keyframes shinyText {
  0%   { background-position: -90px 0; }
  100% { background-position: calc(100% + 90px) 0; }
}

/* ---- la domanda ---- */

.cu-domanda {
  font-size: clamp(19px, 3.2vw, 24px);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -.015em;
  color: var(--su-arancio);
  margin: 0;
  text-wrap: balance;
}

.cu-nota {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--su-arancio-tenue);
  margin: 10px 0 0;
  max-width: 52ch;
}

/* l'errore sta sopra l'arancio: il rosso sparirebbe, serve un fondo bianco */
.cu-errore {
  display: inline-block;
  background: #fff;
  color: var(--errore);
  font-size: 13px;
  font-weight: 600;
  border-radius: 9px;
  padding: 8px 12px;
  margin: 14px 0 0;
}
.cu-errore:empty { display: none; }

/* ---- magic-card: le risposte ----
 * Ogni risposta è una card con un faro radiale che insegue il puntatore.
 * Le coordinate le scrive cu-effetti.js in --mx / --my; senza JS il faro resta
 * semplicemente al centro e la card funziona lo stesso. */

.cu-opzioni {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 26px;
}

.cu-opzione {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  font-family: var(--font);
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--carbone);
  background: #fff;
  border: 0;
  border-radius: var(--raggio);
  padding: 15px 18px;
  cursor: pointer;
  transition: box-shadow .22s, transform .16s, color .22s;
  animation: blurFade .45s cubic-bezier(.22, .9, .3, 1) both;
}

/* le risposte si mettono a fuoco una dopo l'altra */
.cu-opzione:nth-child(1) { animation-delay: .05s; }
.cu-opzione:nth-child(2) { animation-delay: .10s; }
.cu-opzione:nth-child(3) { animation-delay: .15s; }
.cu-opzione:nth-child(4) { animation-delay: .20s; }
.cu-opzione:nth-child(5) { animation-delay: .25s; }
.cu-opzione:nth-child(6) { animation-delay: .30s; }
.cu-opzione:nth-child(n+7) { animation-delay: .35s; }

/* il faro (magic-card) */
.cu-opzione::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  transition: opacity .3s;
  background: radial-gradient(
    240px circle at var(--mx, 50%) var(--my, 50%),
    rgba(var(--arancio-rgb), .16),
    transparent 65%
  );
}

.cu-opzione:hover {
  box-shadow: 0 12px 26px -10px rgba(80, 35, 0, .5);
  transform: translateY(-2px);
  color: var(--nero);
}
.cu-opzione:hover::after { opacity: 1; }
.cu-opzione:active { transform: translateY(0); }
.cu-opzione:focus-visible { outline: 2px solid var(--arancio); outline-offset: 2px; }

.cu-testo { flex: 1 1 auto; }

/* la sigla davanti alla risposta: la lettera (A, B, C…) per le domande a
   scelta, il numero 0-4 per le scale. La scrive il motore. */
.cu-sigla {
  flex: 0 0 auto;
  width: 27px;
  height: 27px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--linea);
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--pietra);
  background: #FBFBFC;
  transition: background .22s, border-color .22s, color .22s;
}

.cu-opzione:hover .cu-sigla {
  border-color: rgba(var(--arancio-rgb), .5);
  color: var(--arancio-testo);
}

/* ---- risposta scelta ---- */

/* La risposta scelta: una banda arancione piena sul fianco sinistro.
   Un bordo colorato non basterebbe — su un pannello arancione un bordo
   arancione attorno a un bottone bianco non si legge. */
.cu-opzione.cu-presa {
  color: var(--nero);
  font-weight: 600;
  box-shadow: inset 5px 0 0 var(--arancio), 0 12px 26px -10px rgba(80, 35, 0, .55);
}
.cu-opzione.cu-presa::after { opacity: 1; }

.cu-opzione.cu-presa .cu-sigla {
  background: var(--arancio);
  border-color: var(--arancio);
  color: #fff;
}

/* ---- ripple-button: l'onda che parte dal punto del click ----
 * Il <span> lo inserisce cu-effetti.js e si toglie da solo a fine animazione. */

.cu-onda {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  background: rgba(var(--arancio-rgb), .22);
  transform: scale(0);
  animation: rippleOut .6s ease-out forwards;
  pointer-events: none;
}
.cu-avanti .cu-onda { background: rgba(var(--arancio-rgb), .28); z-index: 0; }

@keyframes rippleOut {
  to { transform: scale(2.2); opacity: 0; }
}

/* ---- scelta multipla: casella al posto della lettera ---- */

.cu-casella {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--linea-forte);
  border-radius: 7px;
  background: #fff;
  position: relative;
  transition: background .2s, border-color .2s;
}

.cu-opzione:hover .cu-casella { border-color: rgba(var(--arancio-rgb), .6); }
.cu-opzione.cu-presa .cu-casella { border-color: var(--arancio); background: var(--arancio); }
.cu-opzione.cu-presa .cu-casella::after {
  content: '';
  position: absolute;
  inset: 0;
  background: center / 13px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5 6.5 12 13 4.5' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---- scelta con immagine ---- */

.cu-figure { display: flex; gap: 12px; margin-top: 26px; }

.cu-figura {
  flex: 1;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--linea);
  border-radius: var(--raggio);
  background: #fff;
  padding: 0 0 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color .22s, box-shadow .22s, transform .16s;
}
.cu-figura:hover {
  border-color: rgba(var(--arancio-rgb), .55);
  box-shadow: 0 12px 30px -14px rgba(var(--arancio-rgb), .5);
  transform: translateY(-2px);
}
.cu-figura.cu-presa { border-color: var(--arancio); }
.cu-figura img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
.cu-figura-testo { font-size: 14px; font-weight: 600; color: var(--carbone); text-align: center; }

.cu-figura.cu-presa .cu-figura-testo { color: var(--arancio-testo); }

/* ---- campi ---- */

.cu-numero { display: flex; align-items: baseline; gap: 12px; margin-top: 26px; }

.cu-input-grande {
  font-family: var(--font);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--nero);
  background: #fff;
  border: 0;
  border-radius: var(--raggio);
  outline: none;
  padding: 10px 18px;
  width: 210px;
  transition: box-shadow .2s;
}
.cu-input-grande:focus { box-shadow: 0 0 0 3px rgba(255, 255, 255, .55); }
.cu-input-grande::placeholder { color: #C6CBD1; }
.cu-input-grande::-webkit-outer-spin-button,
.cu-input-grande::-webkit-inner-spin-button { -webkit-appearance: none; }
.cu-input-grande[type=number] { -moz-appearance: textfield; appearance: textfield; }

.cu-unita { font-size: 15px; font-weight: 600; color: var(--su-arancio-tenue); }

/* ---- form contatti ---- */

.cu-modulo { margin-top: 26px; }
.cu-campo { margin-bottom: 14px; }

.cu-etichetta {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--su-arancio-tenue);
  margin-bottom: 7px;
}

.cu-input {
  width: 100%;
  font-family: var(--font);
  font-size: 15.5px;
  color: var(--nero);
  background: #fff;
  border: 0;
  border-radius: 11px;
  padding: 14px 15px;
  outline: none;
  transition: box-shadow .2s;
}
.cu-input:focus { box-shadow: 0 0 0 3px rgba(255, 255, 255, .55); }
.cu-input::placeholder { color: #B6BCC3; }

.cu-privacy { font-size: 12.5px; line-height: 1.6; color: var(--su-arancio-tenue); margin: 10px 0 0; }
.cu-privacy a { color: #fff; }

/* ---- shimmer-button: il bottone con la luce che ci scorre dentro ---- */

.cu-azioni { display: flex; margin-top: 26px; }


.cu-avanti {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  color: var(--arancio-testo);
  background: #fff;
  border: 0;
  border-radius: 999px;
  padding: 15px 30px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 12px 26px -10px rgba(80, 35, 0, .55);
  transition: transform .12s, box-shadow .2s, color .2s;
}

/* la freccia: `order` la sposta in coda anche se è un ::before */
.cu-avanti::before { content: '→'; order: 2; font-size: 16px; line-height: 1; }

/* la luce che attraversa il bottone */
.cu-avanti::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 45%;
  height: 100%;
  z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(var(--arancio-rgb), .22), transparent);
  animation: sweep 3s cubic-bezier(.4, 0, .6, 1) infinite;
}

@keyframes sweep {
  from { transform: translateX(-100%); }
  to   { transform: translateX(320%); }
}

.cu-avanti:hover { color: var(--arancio); box-shadow: 0 16px 32px -10px rgba(80, 35, 0, .65); transform: translateY(-1px); }
.cu-avanti:active { transform: translateY(1px); }

.cu-invia { width: 100%; justify-content: center; padding: 16px 30px; font-size: 16px; }

/* ---- elaborazione: i cerchi di ripple ---- */

#cu-attesa { justify-content: center; align-items: center; text-align: center; padding: 40px 0; }

.cu-cerchi {
  position: relative;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  margin: 40px auto 46px;
}
.cu-cerchi::before,
.cu-cerchi::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .7);
  animation: ripplePulse 2s cubic-bezier(.2, .6, .3, 1) infinite;
}
.cu-cerchi::after { animation-delay: 1s; }

@keyframes ripplePulse {
  from { transform: scale(1); opacity: .8; }
  to   { transform: scale(7); opacity: 0; }
}

.cu-attesa-titolo {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--su-arancio);
  margin: 0 0 8px;
}
.cu-attesa-nota { font-size: 14.5px; color: var(--su-arancio-tenue); margin: 0; }

/* ---- schermata finale (solo se CONFIG.END_MODE === 'thanks') ---- */

#cu-grazie { justify-content: center; align-items: center; text-align: center; padding: 40px 0; }

.cu-grazie-box { max-width: 520px; margin: 0 auto; }

.cu-spunta {
  width: 52px;
  height: 52px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: #fff;
  color: var(--arancio);
  font-size: 25px;
  line-height: 52px;
  box-shadow: 0 12px 30px -10px rgba(80, 35, 0, .5);
}

.cu-grazie-titolo {
  font-size: 27px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--su-arancio);
  margin: 0;
  text-wrap: balance;
}

.cu-grazie-nota { font-size: 15px; color: var(--su-arancio-tenue); margin: 14px 0 0; text-wrap: balance; }

/* ---- footer (solo fuori dalla landing) ---- */

.cu-fondo {
  text-align: center;
  font-size: 12px;
  line-height: 1.6;
  color: var(--su-arancio-tenue);
  padding: 14px 20px 26px;
  max-width: 620px;
  margin: 0 auto;
}

/* ---- embed nella landing: altezza = contenuto, mai scroll interno ---- */

/* Altezza = contenuto, non 100% dell'iframe: se restasse al 100% il quiz
   misurerebbe sempre l'altezza dell'iframe e non potrebbe mai restringerlo. */
html.cu-incorniciato, html.cu-incorniciato body {
  height: auto;
  min-height: 0;
  overflow: hidden;
}

/* Dentro la landing l'arancio lo disegna la fascia (.lp-form-section):
   qui si diventa trasparenti, così la sfumatura è una sola e continua e non
   si vede il taglio dove finisce l'iframe. */
html.cu-incorniciato body {
  background: none;
  animation: none;
}
html.cu-incorniciato body::before,
html.cu-incorniciato body::after { display: none; }

/* Il rientro laterale lo dà già il contenitore della fascia: se lo
   ripetessimo qui, il quiz sarebbe rientrato rispetto ai testi sotto. */
html.cu-incorniciato .cu-scena,
html.cu-incorniciato .cu-testata {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

html.cu-incorniciato .cu-scena { padding-top: 4px; padding-bottom: 8px; }

/* Dentro la landing la testata non serve: il logo c'è già sopra e non c'è
   altro. Nasconderla tutta, e non solo il logo, toglie una fascia vuota in
   cima e fa salire la domanda verso l'headline. */
html.cu-incorniciato .cu-testata { display: none; }

/* il disclaimer sta già nel footer della landing: qui sarebbe un doppione */
html.cu-incorniciato .cu-fondo { display: none; }

/* ---- mobile ---- */

@media (max-width: 480px) {
  .cu-testata { padding: 6px 16px 0; }
  .cu-scena { padding: 24px 16px 32px; }
  html.cu-incorniciato .cu-scena { padding-top: 2px; }
  .cu-domanda { font-size: clamp(22px, 6.4vw, 28px); }
  .cu-opzioni { margin-top: 22px; gap: 9px; }
  .cu-opzione { font-size: 15px; gap: 12px; padding: 14px 15px; }
  .cu-input-grande { font-size: 32px; width: 100%; }
  .cu-figure { gap: 10px; }
  .cu-avanti { width: 100%; justify-content: center; }
  .cu-grazie-titolo { font-size: 23px; }
}

/* ---- meno movimento, per chi lo chiede al sistema ---- */

@media (prefers-reduced-motion: reduce) {
  .cu-blocco, .cu-opzione { animation: none; }
  .cu-sezione { animation: none; color: var(--arancio-testo); }
  #cu-barra::after, .cu-avanti::after { animation: none; opacity: 0; }
  body::before, body::after { animation: none; }
  .cu-cerchi::before, .cu-cerchi::after { animation-duration: 4s; }
  .cu-opzione, .cu-sigla, .cu-avanti, #cu-barra, #cu-indietro { transition: none; }
  .cu-opzione:hover, .cu-avanti:active, #cu-indietro:hover { transform: none; }
  .cu-onda { display: none; }
}