/* ══════════════════════════════════════════════════════════════════════════
   AttivaTV — Sistema di design delle pagine pubbliche
   index · change-room · success · instructions · privacy-policy

   Autonomo: non richiede Bootstrap. Le pagine interne (admin, dashboard)
   continuano a usare style.css + Bootstrap e non sono toccate da questo file.

   Progettato per il caso d'uso reale: paziente ricoverato, in piedi o a letto,
   telefono in una mano sola, luce al neon o stanza al buio, spesso anziano.
   Da qui derivano: corpo 17px, bersagli tattili ≥ 56px, numeri enormi e
   tabellari, contrasto alto, nessun contenuto nascosto sugli schermi piccoli.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Carattere: Source Sans 3 variabile, servito dal nostro dominio ──────────
   Self-hosted: nessuna richiesta a Google dal browser dell'utente. */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/source-sans-3-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/source-sans-3-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ══ Token ══════════════════════════════════════════════════════════════ */
:root {
  /* Identità: il navy storico di AttivaTV resta il colore istituzionale,
     il blu resta l'unico colore d'azione. */
  --navy:        #1e3a5f;
  --navy-deep:   #14293f;
  --navy-ink:    #0e1f33;
  --blue:        #1d4ed8;
  --blue-bright: #2563eb;
  --blue-wash:   #eaf1fd;

  /* Testo */
  --ink:       #101d2e;
  --ink-soft:  #475a70;  /* 7.1:1 su bianco */
  --ink-faint: #5c6e84;  /* 5.2:1 su bianco — soglia per i segnaposto */
  --on-navy:        #ffffff;
  --on-navy-soft:   #c3d2e3;  /* 7.5:1 su navy, tinto di navy e non grigio */
  --on-navy-faint:  #9db3cc;  /* 4.9:1 su navy */

  /* Superfici */
  --bg:        #edf3f9;
  --surface:   #ffffff;
  --sunk:      #f3f7fc;
  --line:      #dbe3ed;
  --line-firm: #c3d0e0;

  /* Semantica */
  --ok:        #157347;
  --ok-wash:   #e7f5ed;
  --ok-line:   #a9d9c0;
  --danger:    #b42318;
  --danger-wash: #fdecea;
  --danger-line: #f3bcb6;
  --warn:      #9a5b06;
  --warn-wash: #fdf3e3;

  /* Forma */
  --r-card: 18px;
  --r-ctrl: 13px;
  --r-sm:   9px;

  /* Profondità: una sola scala. Le superfici in rilievo hanno ombra e nessun
     bordo; gli incavi hanno bordo e nessuna ombra. Mai entrambi. */
  --lift-1: 0 1px 2px rgba(16, 34, 58, .05), 0 10px 26px -18px rgba(16, 34, 58, .40);
  --lift-2: 0 2px 4px rgba(16, 34, 58, .06), 0 24px 48px -26px rgba(16, 34, 58, .45);
  --lift-blue: 0 2px 4px rgba(29, 78, 216, .18), 0 18px 32px -16px rgba(29, 78, 216, .45);

  /* Movimento */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --fast: 160ms;
  --mid:  280ms;

  /* Ritmo verticale */
  --gap: 1rem;
  --pad-x: clamp(1rem, 4.5vw, 1.5rem);
}

/* ══ Reset ══════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body, h1, h2, h3, h4, p, figure, ul, ol, dl, dd, fieldset {
  margin: 0;
  padding: 0;
}

ul, ol { list-style: none; }

img, svg { display: block; max-width: 100%; }
img { height: auto; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

fieldset { border: 0; }

/* ══ Base ═══════════════════════════════════════════════════════════════ */
body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: 'Source Sans 3', ui-sans-serif, system-ui, -apple-system,
    'Segoe UI', Roboto, sans-serif;
  font-size: 1.0625rem;   /* 17px: il minimo onesto per chi legge a fatica */
  line-height: 1.6;
  color: var(--ink);
  background:
    radial-gradient(80rem 40rem at 50% -12rem, rgba(37, 99, 235, .13), transparent 70%),
    linear-gradient(180deg, #f2f7fc 0%, #edf3f9 60%, #e7eef7 100%);
  background-attachment: fixed;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Le superfici che non disegniamo noi appartengono comunque al progetto. */
::selection { background: rgba(37, 99, 235, .22); color: var(--navy-ink); }
:root { accent-color: var(--blue); caret-color: var(--blue); }

@supports (scrollbar-color: auto) {
  html { scrollbar-color: var(--line-firm) transparent; scrollbar-width: thin; }
}
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb {
  background: var(--line-firm);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover { background: #a8b8cc; background-clip: content-box; }

:focus-visible {
  outline: 3px solid var(--blue-bright);
  outline-offset: 2px;
  border-radius: 6px;
}

a {
  color: var(--blue);
  text-decoration-thickness: 1.5px;
  text-underline-offset: .18em;
}
a:hover { color: var(--navy); }

/* Ogni numero del prodotto — codice TV, giorni, euro, OTP — è tabellare.
   Le cifre non devono ballare mentre cambiano. */
.readout {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}

/* ══ Icone ══════════════════════════════════════════════════════════════
   Un'unica famiglia disegnata: griglia 24, tratto 1.75, terminali tondi,
   colore ereditato. Nessuna emoji come icona. */
.i {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.i-lg { width: 1.6em; height: 1.6em; }

/* ══ Impalcatura ════════════════════════════════════════════════════════ */
.shell {
  width: 100%;
  max-width: 30rem;
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.shell-wide { max-width: 54rem; }

main {
  flex: 1 0 auto;
  width: 100%;
  padding-block: clamp(1.25rem, 5vw, 2.5rem) clamp(2rem, 6vw, 3rem);
}

/* ══ Testata ════════════════════════════════════════════════════════════ */
.masthead {
  background: var(--navy);
  color: var(--on-navy);
  padding-top: env(safe-area-inset-top);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .07) inset;
}
.masthead-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.25rem;
  padding-block: .4rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  color: var(--on-navy);
  text-decoration: none;
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: -.015em;
  border-radius: 10px;
}
.brand img {
  height: 2rem;
  width: auto;
  border-radius: 5px;
}
.masthead-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 2.5rem;
  padding: .35rem .7rem;
  border-radius: 10px;
  color: var(--on-navy-soft);
  font-size: .9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.masthead-link:hover,
.masthead-link:focus-visible {
  background: rgba(255, 255, 255, .13);
  color: var(--on-navy);
}

/* ══ Titolo di pagina ═══════════════════════════════════════════════════ */
.headline {
  text-align: center;
  margin-bottom: 1.25rem;
}
.headline h1 {
  font-size: clamp(1.75rem, 7.2vw, 2.25rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.025em;
  text-wrap: balance;
  color: var(--navy-ink);
}
.headline p {
  margin-top: .5rem;
  color: var(--ink-soft);
  font-size: 1rem;
  text-wrap: pretty;
  max-width: 26rem;
  margin-inline: auto;
}

.section-title {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -.018em;
  color: var(--navy-ink);
  line-height: 1.25;
}

/* ══ Superfici ══════════════════════════════════════════════════════════ */
.card {
  background: var(--surface);
  border-radius: var(--r-card);
  box-shadow: var(--lift-2);
  padding: clamp(1.15rem, 4.5vw, 1.5rem);
}
.card + .card { margin-top: var(--gap); }

.well {
  background: var(--sunk);
  border: 1px solid var(--line);
  border-radius: var(--r-ctrl);
}

/* ══ Campi ══════════════════════════════════════════════════════════════ */
.field + .field { margin-top: 1.35rem; }

.field-label {
  display: block;
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -.01em;
  color: var(--navy-ink);
  margin-bottom: .5rem;
}
.field-hint {
  display: flex;
  align-items: flex-start;
  gap: .4rem;
  margin-top: .55rem;
  color: var(--ink-soft);
  font-size: .9375rem;
  line-height: 1.45;
}
.field-hint .i { width: 1.1em; height: 1.1em; margin-top: .18em; color: var(--ink-faint); }

.input {
  width: 100%;
  min-height: 3.25rem;
  padding: .6rem .9rem;
  background: var(--sunk);
  border: 2px solid var(--line-firm);
  border-radius: var(--r-ctrl);
  font-size: 1.0625rem;
  transition: border-color var(--fast) var(--ease),
              background var(--fast) var(--ease),
              box-shadow var(--fast) var(--ease);
}
.input::placeholder { color: var(--ink-faint); }
.input:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--blue-bright);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .16);
}

/* ── Il campo del codice TV: il numero è il compito, quindi è il pezzo
      più grande della pagina. ── */
.code-field {
  width: 100%;
  min-height: 4.5rem;
  padding: .35rem .5rem;
  text-align: center;
  font-size: clamp(2.1rem, 11vw, 2.75rem);
  font-weight: 700;
  letter-spacing: .22em;
  text-indent: .22em;          /* ricentra: l'ultima lettera porta lo spazio */
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--navy-ink);
  background: var(--sunk);
  border: 2px solid var(--line-firm);
  border-radius: var(--r-ctrl);
  box-shadow: inset 0 2px 5px rgba(16, 34, 58, .05);
  transition: border-color var(--fast) var(--ease),
              background var(--fast) var(--ease),
              box-shadow var(--fast) var(--ease);
}
.code-field::placeholder { color: var(--ink-faint); font-weight: 400; opacity: 1; }
.code-field:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--blue-bright);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .16);
}
.code-field.is-complete {
  border-color: var(--ok);
  background: var(--ok-wash);
  box-shadow: inset 0 1px 3px rgba(21, 115, 71, .10);
}

/* ── Passo dei giorni: due bersagli enormi e una cifra che si legge da
      lontano. Il campo numerico resta modificabile da tastiera. ── */
.stepper {
  display: flex;
  align-items: stretch;
  gap: .5rem;
}
.stepper-btn {
  flex: none;
  width: 3.5rem;
  min-height: 3.5rem;
  display: grid;
  place-items: center;
  background: var(--surface);
  color: var(--navy);
  border: 2px solid var(--line-firm);
  border-radius: var(--r-ctrl);
  cursor: pointer;
  transition: border-color var(--fast) var(--ease),
              background var(--fast) var(--ease),
              transform var(--fast) var(--ease);
}
.stepper-btn .i { width: 1.5rem; height: 1.5rem; stroke-width: 2.5; }
.stepper-btn:hover:not(:disabled) { border-color: var(--blue-bright); color: var(--blue); }
.stepper-btn:active:not(:disabled) { transform: scale(.94); }
.stepper-btn:disabled { opacity: .4; cursor: not-allowed; }

.stepper-value {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 3.5rem;
  padding: .25rem .5rem;
  text-align: center;
  font-size: 1.65rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--navy-ink);
  background: var(--sunk);
  border: 2px solid var(--line-firm);
  border-radius: var(--r-ctrl);
  -moz-appearance: textfield;
  appearance: textfield;
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease),
              box-shadow var(--fast) var(--ease);
}
.stepper-value::-webkit-outer-spin-button,
.stepper-value::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper-value::placeholder { color: var(--ink-faint); font-weight: 400; opacity: 1; }
.stepper-value:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--blue-bright);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .16);
}

.chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .45rem;
  margin-top: .6rem;
}
@media (min-width: 30rem) {
  .chips { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.chip {
  min-height: 2.75rem;
  padding: .35rem .75rem;
  background: var(--surface);
  color: var(--ink-soft);
  border: 1.5px solid var(--line);
  border-radius: 99px;
  font-size: .9375rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease),
              background var(--fast) var(--ease);
}
.chip:hover { border-color: var(--line-firm); color: var(--navy); }
.chip[aria-pressed='true'] {
  background: var(--blue-wash);
  border-color: var(--blue-bright);
  color: var(--blue);
}

/* ══ Pulsanti ═══════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 3rem;
  padding: .6rem 1.15rem;
  border: 2px solid transparent;
  border-radius: var(--r-ctrl);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease),
              border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease),
              transform var(--fast) var(--ease);
}
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { cursor: not-allowed; }

.btn-block { width: 100%; }
.btn-xl { min-height: 3.5rem; font-size: 1.125rem; padding-inline: 1.25rem; }

.btn-primary {
  background: linear-gradient(180deg, var(--blue-bright), var(--blue));
  color: #fff;
  box-shadow: var(--lift-blue);
}
.btn-primary:hover:not(:disabled) { background: linear-gradient(180deg, #2f6ef0, #1a45c2); }
.btn-primary:disabled {
  background: #dde5ef;
  color: var(--ink-faint);
  box-shadow: none;
}

.btn-quiet {
  background: var(--surface);
  color: var(--navy);
  border-color: var(--line-firm);
  box-shadow: var(--lift-1);
}
.btn-quiet:hover:not(:disabled) { border-color: var(--navy); }

.btn-ghost {
  background: transparent;
  color: var(--ink-soft);
  min-height: 2.75rem;
  font-weight: 600;
  font-size: 1rem;
}
.btn-ghost:hover { color: var(--navy); }

.btn-call {
  background: var(--navy);
  color: #fff;
  box-shadow: var(--lift-1);
}
.btn-call:hover { background: var(--navy-deep); color: #fff; }

/* Alias mantenuti per compatibilità con lo script di change-room. */
.btn-success { background: var(--ok); color: #fff; }
.btn-outline-success { background: var(--ok-wash); color: var(--ok); border-color: var(--ok-line); }

/* ══ Pannello del totale ════════════════════════════════════════════════ */
.total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem 1.1rem;
  border-radius: var(--r-ctrl);
  background: linear-gradient(140deg, var(--navy) 0%, #26559c 100%);
  color: var(--on-navy);
  box-shadow: var(--lift-1);
}
.total-label {
  font-size: .9375rem;
  font-weight: 600;
  color: var(--on-navy-soft);
}
.total-amount {
  font-size: 2.125rem;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums lining-nums;
}
.total-rate {
  text-align: right;
  font-size: .875rem;
  line-height: 1.35;
  color: var(--on-navy-soft);
  max-width: 8.5rem;
}

/* ══ Tariffe (informazione secondaria, a scomparsa) ═════════════════════ */
.disclosure {
  border-radius: var(--r-ctrl);
  border: 1px solid var(--line);
  background: var(--sunk);
}
.disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  min-height: 2.9rem;
  padding: .5rem .9rem;
  list-style: none;
  cursor: pointer;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--ink-soft);
  border-radius: var(--r-ctrl);
}
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary .i { transition: transform var(--mid) var(--ease); }
.disclosure[open] > summary .i { transform: rotate(180deg); }
.disclosure > summary:hover { color: var(--navy); }
.disclosure-body { padding: 0 .9rem .8rem; }

.tiers { display: flex; flex-direction: column; }
.tier {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .5rem .6rem;
  border-radius: var(--r-sm);
  font-size: .9375rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums lining-nums;
}
.tier + .tier { border-top: 1px solid var(--line); border-radius: 0; }
.tier-price { font-weight: 600; color: var(--ink); white-space: nowrap; }
.tier.is-active {
  background: var(--blue-wash);
  color: var(--blue);
  font-weight: 700;
  border-top-color: transparent;
  border-radius: var(--r-sm);
}
.tier.is-active .tier-price { color: var(--blue); }

/* ══ Barra d'acquisto agganciata al pollice ═════════════════════════════
   Compare solo quando il pulsante principale è uscito dallo schermo. */
.thumbbar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .7rem var(--pad-x) calc(.7rem + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .93);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -12px 28px -20px rgba(16, 34, 58, .55);
  transform: translateY(115%);
  visibility: hidden;
  transition: transform var(--mid) var(--ease), visibility var(--mid);
}
.thumbbar.is-up { transform: none; visibility: visible; }
.thumbbar-sum { flex: 1 1 auto; min-width: 0; line-height: 1.2; }
.thumbbar-sum small { display: block; font-size: .8125rem; color: var(--ink-soft); }
.thumbbar-sum strong {
  font-size: 1.375rem;
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--navy-ink);
}
.thumbbar .btn { flex: none; }

/* ══ Avvisi ═════════════════════════════════════════════════════════════ */
.alert {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .75rem .9rem;
  border-radius: var(--r-ctrl);
  font-size: 1rem;
  line-height: 1.45;
}
.alert .i { margin-top: .15em; flex: none; }
.alert-danger  { background: var(--danger-wash); color: var(--danger); border: 1px solid var(--danger-line); }
.alert-danger a { color: var(--danger); font-weight: 700; }
.alert-info    { background: var(--blue-wash);  color: #12428f; border: 1px solid #c3d8fa; }
.alert-info a  { color: #12428f; font-weight: 700; }
.alert-ok      { background: var(--ok-wash);    color: var(--ok); border: 1px solid var(--ok-line); }

/* ══ Attesa ═════════════════════════════════════════════════════════════ */
.spinner {
  width: 1.15em;
  height: 1.15em;
  border: 2.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  flex: none;
}
.spinner-lg { width: 2rem; height: 2rem; border-width: 3px; color: var(--blue); }
@keyframes spin { to { transform: rotate(1turn); } }

/* ══ Percorso a tre passi (change-room) ═════════════════════════════════ */
.steps {
  display: flex;
  align-items: flex-start;
  margin-bottom: 1.1rem;
}
.step {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  min-width: 0;
}
.step-dot {
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--line-firm);
  color: var(--ink-faint);
  font-weight: 700;
  font-size: .9375rem;
  font-variant-numeric: tabular-nums;
  transition: background var(--mid) var(--ease), border-color var(--mid) var(--ease),
              color var(--mid) var(--ease), box-shadow var(--mid) var(--ease);
}
.step-name {
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  color: var(--ink-faint);
  transition: color var(--mid) var(--ease);
}
.step.is-current .step-dot {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  box-shadow: 0 0 0 5px rgba(37, 99, 235, .15);
}
.step.is-current .step-name { color: var(--blue); }
.step.is-done .step-dot { background: var(--ok); border-color: var(--ok); color: #fff; }
.step.is-done .step-name { color: var(--ok); }
.step-rule {
  flex: 0 1 3rem;
  height: 2px;
  margin-top: 1.1rem;
  background: var(--line-firm);
  border-radius: 2px;
  transition: background var(--mid) var(--ease);
}
.step-rule.is-done { background: var(--ok); }

/* ══ Cifre dell'OTP ═════════════════════════════════════════════════════ */
.otp {
  display: flex;
  gap: .4rem;
  justify-content: center;
}
.otp input {
  width: 100%;
  max-width: 3.1rem;
  min-width: 0;
  height: 3.5rem;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--navy-ink);
  background: var(--sunk);
  border: 2px solid var(--line-firm);
  border-radius: var(--r-ctrl);
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease),
              box-shadow var(--fast) var(--ease);
}
.otp input:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--blue-bright);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .16);
}
.otp input.is-filled { border-color: var(--blue); background: var(--blue-wash); }

/* ══ Riquadro d'esito ═══════════════════════════════════════════════════ */
.outcome {
  padding: 1.1rem 1rem;
  border-radius: var(--r-ctrl);
  background: var(--sunk);
  border: 1px solid var(--line);
  text-align: center;
}
.outcome-caption {
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.outcome-code {
  margin-top: .25rem;
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-indent: .16em;
  line-height: 1.1;
  color: var(--blue);
  font-variant-numeric: tabular-nums lining-nums;
}
.outcome-meta {
  display: inline-flex;
  align-items: baseline;
  gap: .4rem;
  margin-top: .5rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem 1rem;
  border-radius: 99px;
  font-weight: 700;
  font-size: 1rem;
  background: var(--ok-wash);
  color: var(--ok);
  border: 1px solid var(--ok-line);
}
.status-pill.is-queued { background: var(--warn-wash); color: var(--warn); border-color: #edd2a4; }

/* ══ Segno di conferma disegnato (success) ══════════════════════════════ */
.checkmark {
  width: 5.5rem;
  height: 5.5rem;
  margin: 0 auto;
  color: var(--ok);
}
.checkmark circle,
.checkmark path {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.checkmark circle { stroke-width: 2; opacity: .28; }
.checkmark path { stroke-width: 3; }
@media (prefers-reduced-motion: no-preference) {
  .checkmark circle {
    stroke-dasharray: 151;
    stroke-dashoffset: 151;
    animation: draw .55s var(--ease) forwards;
  }
  .checkmark path {
    stroke-dasharray: 36;
    stroke-dashoffset: 36;
    animation: draw .4s var(--ease) .3s forwards;
  }
}
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ══ Riepilogo a tre voci ═══════════════════════════════════════════════ */
.facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .5rem;
}
.fact {
  padding: .8rem .4rem;
  border-radius: var(--r-ctrl);
  background: var(--sunk);
  border: 1px solid var(--line);
  text-align: center;
}
.fact dt {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: .15rem;
}
.fact dd {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--navy-ink);
  font-variant-numeric: tabular-nums lining-nums;
}
.fact dd.is-text { font-size: 1.125rem; letter-spacing: -.01em; }

/* ══ Riga di scelta ═════════════════════════════════════════════════════ */
.nav-row {
  display: flex;
  align-items: center;
  gap: .85rem;
  min-height: 3.5rem;
  padding: .8rem 1rem;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--r-ctrl);
  color: var(--ink);
  text-decoration: none;
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.nav-row:hover { border-color: var(--blue-bright); background: var(--blue-wash); color: var(--ink); }
.nav-row > .i { color: var(--blue); }
.nav-row-text { flex: 1 1 auto; min-width: 0; line-height: 1.3; text-align: left; }
.nav-row-text strong { display: block; font-weight: 700; letter-spacing: -.012em; }
.nav-row-text small { display: block; margin-top: .05rem; font-size: .875rem; color: var(--ink-soft); }
.nav-row-go { color: var(--ink-faint); }

/* ══ Fiducia ════════════════════════════════════════════════════════════ */
.trust {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: .4rem;
  margin-top: .85rem;
  color: var(--ink-soft);
  font-size: .9375rem;
  text-align: center;
}
.trust .i { color: var(--ok); margin-top: .22em; }

.aside-link {
  margin-top: .9rem;
  text-align: center;
  font-size: 1rem;
  color: var(--ink-soft);
}
.aside-link a {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-weight: 700;
  text-decoration: none;
  padding: .35rem .25rem;
}
.aside-link a:hover { text-decoration: underline; }

/* ══ Contenuto di lettura (istruzioni, privacy) ═════════════════════════ */
.prose { color: var(--ink); }
.prose p { max-width: 68ch; }
.prose p + p { margin-top: .7rem; }
.prose strong { font-weight: 700; color: var(--navy-ink); }
.prose h2 {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--navy-ink);
  margin-bottom: .5rem;
}
.prose ul {
  margin-top: .5rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.prose ul li {
  position: relative;
  padding-left: 1.35rem;
}
.prose ul li::before {
  content: '';
  position: absolute;
  left: .3rem;
  top: .68em;
  width: .4rem;
  height: .4rem;
  border-radius: 50%;
  background: var(--blue-bright);
}

/* Scheda-istruzione: icona a sinistra, testo a destra, una sola regola. */
.guide {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  padding: clamp(1rem, 4vw, 1.35rem);
  background: var(--surface);
  border-radius: var(--r-card);
  box-shadow: var(--lift-1);
}
.guide + .guide { margin-top: .85rem; }
.guide-figure {
  flex: none;
  width: 4.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.guide-figure picture { display: block; width: 100%; }
.guide-figure img {
  width: 100%;
  height: auto;
  max-height: 6rem;
  object-fit: contain;
  object-position: center;
  border-radius: 8px;
}
.guide-badge {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--blue-wash);
  color: var(--blue);
}
.guide-badge.is-green { background: var(--ok-wash); color: var(--ok); }
.guide-badge.is-warm  { background: var(--warn-wash); color: var(--warn); }
.guide-body { min-width: 0; flex: 1 1 auto; }
.guide-body h3 {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--navy-ink);
  margin-bottom: .35rem;
}
.guide-body p + p { margin-top: .5rem; }

.callout {
  padding: clamp(1.15rem, 5vw, 1.6rem);
  border-radius: var(--r-card);
  background: linear-gradient(140deg, var(--navy) 0%, #26559c 100%);
  color: var(--on-navy);
  text-align: center;
  box-shadow: var(--lift-2);
}
.callout h2 { color: #fff; }
.callout p { color: var(--on-navy-soft); margin-inline: auto; }
.callout .phone {
  display: block;
  margin: .9rem 0 1rem;
  font-size: clamp(1.75rem, 8vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -.02em;
  color: #fff;
  text-decoration: none;
  font-variant-numeric: tabular-nums lining-nums;
}
.callout .btn-quiet { background: #fff; border-color: transparent; color: var(--navy); }

/* ══ Piede ══════════════════════════════════════════════════════════════ */
.footer {
  margin-top: auto;
  background: var(--navy);
  color: var(--on-navy-soft);
  font-size: .9375rem;
  padding-bottom: env(safe-area-inset-bottom);
}
.footer-in {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-block: 1.25rem;
}
.footer-brand {
  font-weight: 700;
  color: #fff;
  font-size: 1rem;
  letter-spacing: -.01em;
}
.footer a {
  color: var(--on-navy-soft);
  text-decoration: none;
}
.footer a:hover { color: #fff; text-decoration: underline; }
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1.25rem;
}
.footer-links a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 2.5rem;
  font-weight: 600;
}
.footer-fine { color: var(--on-navy-faint); font-size: .875rem; }

/* ══ Utilità (usate anche dagli script esistenti) ═══════════════════════ */
.d-none { display: none !important; }
.stack  { display: flex; flex-direction: column; gap: var(--gap); }
.stack-sm { display: flex; flex-direction: column; gap: .6rem; }
.row-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.row-actions > * { flex: 1 1 12rem; }
.center { text-align: center; }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ══ Momenti d'animazione ═══════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
  .reveal { animation: reveal var(--mid) var(--ease) both; }
  @keyframes reveal {
    from { opacity: 0; transform: translateY(10px) scale(.985); }
    to   { opacity: 1; transform: none; }
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ══ Schermi più larghi ═════════════════════════════════════════════════
   Il telefono è il caso principale; oltre i 640px il contenuto smette di
   allargarsi e guadagna aria, senza cambiare gerarchia. */
@media (min-width: 40rem) {
  body { font-size: 1.09375rem; }
  .footer-in {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
  }
  .footer-links { justify-content: flex-end; flex-direction: column; gap: 0; }
  .otp { gap: .55rem; }
  .otp input { max-width: 3.4rem; }
  .thumbbar { display: none; }
}

@media (min-width: 34rem) {
  .guide { flex-direction: row; gap: 1.25rem; }
  .guide-figure { width: 5rem; }
  .guide-figure img { max-height: 9rem; }
}

@media (min-width: 64rem) {
  .guide { gap: 1.5rem; }
  .guide-figure { width: 5.5rem; }
}

/* Nessun effetto al passaggio del dito: sui touch l'hover resta incollato. */
@media (hover: none) {
  .btn-primary:hover:not(:disabled) { background: linear-gradient(180deg, var(--blue-bright), var(--blue)); }
  .chip:hover { border-color: var(--line); color: var(--ink-soft); }
}