/* Meridian onboarding — personal KYC package */
:root {
  --bg: oklch(0.99 0.003 210);
  --ink: oklch(0.18 0.03 250);
  --muted: oklch(0.46 0.025 240);
  --line: oklch(0.9 0.012 210);
  --primary: oklch(0.45 0.095 210);
  --primary-deep: oklch(0.28 0.075 215);
  --accent: oklch(0.62 0.11 75);
  --danger: oklch(0.5 0.16 25);
  --ok: oklch(0.46 0.11 158);
  --surface: oklch(1 0 0);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --font: 'DM Sans', system-ui, sans-serif;
  --display: 'Fraunces', Georgia, serif;
  --shadow-float: 0 20px 50px oklch(0.3 0.04 220 / 0.08);
  --shadow-card: 0 1px 2px oklch(0.3 0.04 220 / 0.05), 0 6px 20px oklch(0.3 0.04 220 / 0.05);

  /* z-index scale */
  --z-nav: 50;
  --z-topbar: 55;
  --z-progress: 60;
  --z-confetti: 80;

  /* document artwork */
  --art-bg: oklch(0.965 0.008 220);
  --art-edge: oklch(0.83 0.02 220);
  --art-line: oklch(0.84 0.02 220);
  --art-photo: oklch(0.83 0.05 215);
  --art-accent: oklch(0.72 0.07 215);
  --art-ink: oklch(0.42 0.04 240);
  --art-bracket: oklch(0.6 0.05 220);
  --art-shade: transparent;
}

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

html,
body {
  margin: 0;
  min-height: 100%;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overscroll-behavior-y: contain;
}

body {
  min-height: 100dvh;
  overflow-x: hidden;
  position: relative;
}

/* Atmospheric layer */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 8% -10%, oklch(0.88 0.05 210 / 0.5), transparent 55%),
    radial-gradient(ellipse 50% 40% at 100% 20%, oklch(0.92 0.05 75 / 0.3), transparent 50%),
    radial-gradient(ellipse 60% 45% at 70% 110%, oklch(0.9 0.04 210 / 0.28), transparent 55%);
}

/* Scrim so scrolling content fades out under the fixed footer and nav */
body::after {
  content: '';
  position: fixed;
  inset: auto 0 0 0;
  height: 6rem;
  z-index: 38;
  pointer-events: none;
  background: linear-gradient(to top, var(--bg) 42%, oklch(0.99 0.003 210 / 0) 100%);
}

/* Progress */
.progress {
  position: fixed;
  inset: 0 0 auto;
  height: 4px;
  z-index: var(--z-progress);
  background: oklch(0.93 0.01 210 / 0.9);
}

.progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--primary-deep), var(--primary));
  transition: width 0.45s var(--ease);
}

.topbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-topbar);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.5rem;
  padding-top: calc(1rem + env(safe-area-inset-top));
  pointer-events: none;
}

.topbar .logo {
  pointer-events: auto;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--primary-deep);
  text-decoration: none;
  letter-spacing: -0.02em;
  transition: opacity 0.2s ease;
}

.topbar .logo:hover {
  opacity: 0.75;
}

.step-count {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  background: oklch(1 0 0 / 0.85);
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--line);
}

/* Stage */
.stage {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  /* "safe" o il tasto per saltare finisce sotto la riga legale.
     Con align-content: center e un contenuto piu alto dello schermo, la griglia
     deborda sopra e sotto in parti uguali e si mangia il padding che tiene
     libera la fascia del footer, che e fixed. Succedeva su tutti gli step con
     l'illustrazione e un tasto per saltare: "Skip for now" restava scritto
     sotto "Encrypted in transit". Con safe, quando non ci sta, parte dall'alto
     e il padding resta. */
  align-content: safe center;
  padding: 5.5rem 1.15rem 7.25rem;
  padding-left: max(1.15rem, env(safe-area-inset-left));
  padding-right: max(1.15rem, env(safe-area-inset-right));
  padding-bottom: calc(7.25rem + env(safe-area-inset-bottom));
}

@media (min-width: 600px) {
  .stage {
    padding: 6rem 1.35rem 7.5rem;
    padding-bottom: calc(7.5rem + env(safe-area-inset-bottom));
  }
}

.slide {
  width: min(38rem, 100%);
}

.slide.enter-fwd {
  animation: enter-fwd 0.26s var(--ease-out) both;
}

.slide.enter-back {
  animation: enter-back 0.26s var(--ease-out) both;
}

@keyframes enter-fwd {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes enter-back {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Question chrome */
.q-meta {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.85rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--primary);
}

.q-section {
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

.q-title {
  margin: 0 0 0.6rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.6rem, 5.6vw, 2.35rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
  text-wrap: balance;
  color: var(--ink);
}

.q-help {
  margin: 0 0 1.25rem;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.55;
  max-width: 46ch;
  text-wrap: pretty;
}

/* Il link che porta fuori dal modulo, per il referto del credito. Sta sotto la
   spiegazione e deve avere l'area di tocco di un pulsante: chi compila e su un
   telefono, e un link grande come il testo non lo prende. */
.q-link {
  margin: -0.75rem 0 1.25rem;
}

.q-link a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--primary);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.q-link a:hover,
.q-link a:focus-visible {
  border-color: var(--primary);
  background: oklch(0.45 0.095 210 / 0.06);
}

.q-link svg {
  opacity: 0.7;
}

/* Inputs */
.field-wrap {
  position: relative;
}

.field-input {
  width: 100%;
  font: inherit;
  font-size: max(1.15rem, 16px);
  font-weight: 500;
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--line);
  border-radius: 0;
  min-height: 2.85rem;
  padding: 0.75rem 0 0.85rem;
  outline: none;
  transition: border-color 0.2s ease;
  caret-color: var(--primary);
  -webkit-appearance: none;
  appearance: none;
}

.field-input:focus {
  border-bottom-color: var(--primary-deep);
}

.field-input::placeholder {
  color: oklch(0.55 0.02 240);
  font-weight: 400;
}

.field-box {
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 0.9rem 1.05rem;
  background: oklch(1 0 0 / 0.9);
  min-height: 6rem;
  resize: vertical;
}

.field-box:focus {
  border-color: var(--primary-deep);
}

.field-underline {
  display: block;
  height: 2px;
  margin-top: -2px;
  width: 0;
  background: var(--primary-deep);
  transition: width 0.35s var(--ease);
  border-radius: 1px;
}

.field-wrap:focus-within .field-underline {
  width: 100%;
}

.field-row.three {
  display: grid;
  grid-template-columns: 1.3fr 0.6fr 0.8fr;
  gap: 1.25rem;
}

@media (max-width: 560px) {
  .field-row.three {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* Intro checklist */
.mid-checklist {
  margin: 0 0 1.75rem;
  padding: 1rem 1.1rem 1rem 2.1rem;
  border-radius: 14px;
  background: oklch(0.975 0.012 210);
  border: 1px solid var(--line);
  display: grid;
  gap: 0.5rem;
  font-size: 0.95rem;
  line-height: 1.4;
}

.mid-checklist li::marker {
  color: var(--primary);
}

/* Choices */
.choice-list {
  display: grid;
  gap: 0.65rem;
  margin: 0 0 1.5rem;
}

.choice-btn {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--ink);
  padding: 1rem 1.1rem;
  min-height: 3.4rem;
  border-radius: 14px;
  border: 1.5px solid var(--line);
  background: oklch(1 0 0 / 0.9);
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease;
  touch-action: manipulation;
}

.choice-btn:hover {
  border-color: oklch(0.7 0.04 210);
  background: #fff;
}

.choice-btn:focus-visible {
  outline: 2px solid var(--primary-deep);
  outline-offset: 2px;
}

.choice-btn.selected {
  border-color: var(--primary-deep);
  background: oklch(0.97 0.02 210);
  box-shadow: 0 0 0 3px oklch(0.45 0.09 210 / 0.14);
}

.choice-radio {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  border: 2px solid oklch(0.75 0.02 210);
  flex-shrink: 0;
}

.choice-btn.selected .choice-radio {
  border-color: var(--primary-deep);
  background: var(--primary-deep);
  box-shadow: inset 0 0 0 3px #fff;
}

/* ——— How to shoot: three rules ——— */
.rules {
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.rule {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1rem 0.85rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: oklch(1 0 0 / 0.85);
  box-shadow: var(--shadow-card);
}

.rule-art svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.rule-text h2 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.25rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.rule-n {
  display: grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: var(--primary-deep);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}

.rule-text p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--muted);
}

@media (max-width: 400px) {
  .rule {
    grid-template-columns: 4.5rem 1fr;
    gap: 0.8rem;
  }

  .rule-text p {
    font-size: 0.84rem;
  }
}

/* ——— Document examples ——— */
.doc-guide {
  margin: 0 0 1.15rem;
  display: grid;
  gap: 0.7rem;
}

.doc-examples {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
}

.doc-ex {
  margin: 0;
  padding: 0.5rem 0.5rem 0.6rem;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: oklch(1 0 0 / 0.8);
  display: grid;
  gap: 0.5rem;
}

.doc-ex-good {
  --art-bg: oklch(0.965 0.03 160);
  --art-bracket: oklch(0.55 0.12 158);
  --art-edge: oklch(0.8 0.03 200);
  border-color: oklch(0.86 0.05 158);
}

.doc-ex-bad {
  --art-bg: oklch(0.955 0.025 28);
  --art-bracket: oklch(0.6 0.13 28);
  --art-shade: oklch(0.35 0.04 250 / 0.34);
  --art-edge: oklch(0.8 0.03 220);
  border-color: oklch(0.87 0.05 28);
}

.doc-art {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.doc-ex figcaption {
  display: flex;
  justify-content: center;
}

.doc-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
}

.doc-tag::before {
  font-size: 0.85em;
}

.doc-tag-ok {
  background: oklch(0.93 0.05 158);
  color: oklch(0.36 0.09 158);
}

.doc-tag-ok::before {
  content: '✓';
}

.doc-tag-bad {
  background: oklch(0.93 0.045 28);
  color: oklch(0.42 0.13 28);
}

.doc-tag-bad::before {
  content: '✕';
}

.doc-checks {
  margin: 0;
  padding: 0.8rem 0.95rem;
  list-style: none;
  display: grid;
  gap: 0.45rem;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: oklch(1 0 0 / 0.8);
  font-size: 0.9rem;
  line-height: 1.35;
  color: var(--ink);
}

.doc-checks li {
  display: grid;
  grid-template-columns: 1.1rem 1fr;
  gap: 0.55rem;
  align-items: start;
}

.doc-checks svg {
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.05rem;
  color: var(--ok);
}

/* ——— Uploader ——— */
.uploader {
  display: grid;
  gap: 0.65rem;
}

.drop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  width: 100%;
  min-height: 7.75rem;
  border: 1.5px dashed oklch(0.78 0.035 210);
  border-radius: 16px;
  background: oklch(1 0 0 / 0.85);
  padding: 1.35rem 1.25rem;
  text-align: center;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}

/* The native control never paints: browsers render their own drop-zone UI
   for file inputs, and it used to bleed through the styled label. */
.drop-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  border: 0;
  overflow: hidden;
  opacity: 0;
  clip-path: inset(50%);
  white-space: nowrap;
}

.drop:hover {
  border-color: var(--primary);
  background: oklch(0.985 0.012 210);
}

.drop:focus-within {
  border-color: var(--primary-deep);
  box-shadow: 0 0 0 3px oklch(0.45 0.09 210 / 0.2);
}

.drop.drag {
  border-color: var(--primary-deep);
  border-style: solid;
  background: oklch(0.96 0.025 210);
}

.drop-icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 0.6rem;
  border-radius: 50%;
  background: oklch(0.94 0.025 210);
  color: var(--primary-deep);
  transition:
    background 0.2s ease,
    transform 0.2s var(--ease);
}

.drop:hover .drop-icon {
  transform: translateY(-1px);
  background: oklch(0.92 0.035 210);
}

.drop-title {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.drop-hint {
  font-size: 0.85rem;
  color: var(--muted);
}

.drop.has-file {
  border-style: solid;
  border-color: oklch(0.75 0.08 158);
  background: oklch(0.98 0.02 158);
}

.drop.has-file .drop-icon {
  background: oklch(0.92 0.05 158);
  color: var(--ok);
}

/* Un upload fallito e l'unica cosa nel riquadro: deve leggersi come tale,
   invece di restare neutro sopra una riga rossa. */
.drop.has-error {
  border-style: solid;
  border-color: oklch(0.72 0.14 25);
  background: oklch(0.98 0.02 25);
}

.drop.has-error .drop-icon {
  background: oklch(0.93 0.06 25);
  color: oklch(0.5 0.18 25);
}

.camera-btn {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: oklch(1 0 0 / 0.9);
  color: var(--primary-deep);
  font-size: 0.98rem;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  touch-action: manipulation;
}

.camera-btn:focus-within {
  border-color: var(--primary-deep);
  box-shadow: 0 0 0 3px oklch(0.45 0.09 210 / 0.2);
}

@media (pointer: coarse) {
  .camera-btn {
    display: flex;
  }

  .drop {
    min-height: 7.5rem;
    padding: 1.2rem 1rem;
  }

  .drop:hover {
    border-color: oklch(0.78 0.035 210);
    background: oklch(1 0 0 / 0.85);
  }

  .drop:active {
    border-color: var(--primary);
    background: oklch(0.98 0.012 210);
  }
}

/* Uploaded files */
.file-list {
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.5rem;
}

.file-list li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.7rem;
  border-radius: 12px;
  border: 1px solid oklch(0.85 0.05 158);
  background: oklch(0.985 0.015 158);
}

.file-thumb {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 8px;
  object-fit: cover;
  background: #fff;
  border: 1px solid var(--line);
}

.file-thumb-doc {
  display: grid;
  place-items: center;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--primary-deep);
}

.file-meta {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.file-name {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-size {
  font-size: 0.76rem;
  color: var(--muted);
}

/* Upload state: the file is on the server, or it is not, and that has to be visible */
.file-sub {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.file-sub .file-size::after {
  content: '·';
  margin-left: 0.4rem;
  color: var(--line);
}

.file-state {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--muted);
}

.file-state-ok {
  color: oklch(0.48 0.11 158);
}

.file-state-err {
  color: var(--danger);
}

.file-item.is-error {
  border-color: oklch(0.82 0.09 25);
  background: oklch(0.985 0.02 25);
}

.file-remove {
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--danger);
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  padding: 0.4rem 0.45rem;
  touch-action: manipulation;
}

.file-remove:hover {
  text-decoration: underline;
}

.file-remove:focus-visible {
  outline: 2px solid var(--danger);
  outline-offset: 1px;
}

/* Actions */
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 1rem;
  margin-top: 1.5rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  font: inherit;
  font-weight: 600;
  font-size: 1rem;
  border: none;
  border-radius: 999px;
  min-height: 3rem;
  padding: 0.9rem 1.55rem;
  cursor: pointer;
  text-decoration: none;
  touch-action: manipulation;
  transition:
    transform 0.15s var(--ease),
    background 0.2s ease,
    box-shadow 0.2s ease;
}

.btn:focus-visible {
  outline: 2px solid var(--primary-deep);
  outline-offset: 2px;
}

.btn:active {
  transform: scale(0.98);
}

.btn-primary {
  background: var(--primary-deep);
  color: #fff;
  box-shadow: 0 8px 24px oklch(0.3 0.06 215 / 0.2);
}

.btn-primary:hover {
  background: var(--primary);
}

.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

.btn-ico {
  display: inline-flex;
  width: 1.15rem;
  height: 1.15rem;
}

.btn-ghost {
  background: transparent;
  color: var(--muted);
  padding-inline: 0.65rem;
  font-weight: 500;
}

.btn-ghost:hover {
  color: var(--ink);
}

.ok-key {
  font-size: 0.85rem;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.ok-key kbd {
  display: inline-flex;
  align-items: center;
  padding: 0.2em 0.5em;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 0.78em;
  font-family: inherit;
  font-weight: 600;
}

@media (max-width: 480px) {
  .btn,
  .btn-ghost {
    width: 100%;
  }

  .actions {
    flex-direction: column;
    align-items: stretch;
    margin-top: 1.5rem;
  }
}

@media (hover: none), (max-width: 720px) {
  .ok-key {
    display: none;
  }
}

/* Messages */
.err {
  margin: 1rem 0 0;
  color: var(--danger);
  font-weight: 500;
  font-size: 0.92rem;
  line-height: 1.4;
  animation: shake 0.35s var(--ease);
}

@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-4px);
  }
  75% {
    transform: translateX(4px);
  }
}

.notice {
  margin: 0.9rem 0 0;
  padding: 0.75rem 0.9rem;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: oklch(0.97 0.01 210);
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--muted);
}

.notice-warn {
  border-color: oklch(0.85 0.07 75);
  background: oklch(0.97 0.04 80);
  color: oklch(0.36 0.07 60);
}

/* Intro / success */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.85rem;
  margin: 0 0 1.15rem;
  border-radius: 999px;
  background: oklch(0.95 0.02 210);
  color: var(--primary-deep);
  font-size: 0.8rem;
  font-weight: 600;
  border: 1px solid oklch(0.9 0.03 210);
}

.badge-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px oklch(0.7 0.1 155 / 0.22);
}

.slide.center .q-title {
  max-width: 16ch;
}

.success-check {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: oklch(0.93 0.05 158);
  color: var(--ok);
  margin-bottom: 1.35rem;
  box-shadow: 0 8px 32px oklch(0.55 0.1 155 / 0.18);
  animation: pop 0.5s var(--ease) both;
}

@keyframes pop {
  from {
    transform: scale(0.7);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Review */
.review-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.2rem 1.3rem;
  box-shadow: var(--shadow-card);
}

.review-name {
  margin: 0 0 0.35rem;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.review-lines {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--muted);
  word-break: break-word;
}

.review-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem 1rem;
  margin: 1.1rem 0 0;
  padding: 0.9rem 0 0;
  border-top: 1px solid var(--line);
}

.review-facts dt {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.review-facts dd {
  margin: 0.15rem 0 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
}

.review-files {
  margin: 1.1rem 0 0;
  padding: 0.9rem 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
  display: grid;
  gap: 0.4rem;
  font-size: 0.85rem;
}

.review-files li {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
}

.review-files span {
  font-weight: 600;
  color: var(--ink);
}

.review-files em {
  font-style: normal;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 55%;
  text-align: right;
}

/* Bottom nav */
.bottom-nav {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: var(--z-nav);
  display: flex;
  gap: 0.4rem;
  padding: 0.85rem max(0.9rem, env(safe-area-inset-right)) calc(0.85rem + env(safe-area-inset-bottom));
  pointer-events: none;
}

.bottom-nav button {
  pointer-events: auto;
  width: 3rem;
  height: 3rem;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: oklch(1 0 0 / 0.95);
  color: var(--ink);
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 16px oklch(0.3 0.02 250 / 0.08);
  transition:
    background 0.15s ease,
    transform 0.15s var(--ease);
  touch-action: manipulation;
}

.bottom-nav button:hover:not(:disabled) {
  background: #fff;
  transform: translateY(-1px);
}

.bottom-nav button:focus-visible {
  outline: 2px solid var(--primary-deep);
  outline-offset: 2px;
}

.bottom-nav button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Non fixed.
   Era ancorata in fondo allo schermo e finiva sopra il contenuto ogni volta che
   uno step era piu alto del telefono: sugli step facoltativi il tasto per
   saltare usciva scritto sotto "Encrypted in transit", illeggibile. Il padding
   in fondo allo stage non protegge, perche una barra fixed sta ferma mentre il
   contenuto scorre. In flusso segue la pagina e non copre piu niente. */
.footer-note {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 40;
  max-width: calc(100% - 7.5rem);
  padding: 0.85rem 1.15rem calc(0.85rem + env(safe-area-inset-bottom));
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.4;
  pointer-events: none;
}

.footer-note a {
  pointer-events: auto;
  color: var(--primary-deep);
  font-weight: 600;
  text-decoration: none;
}

.footer-note a:hover {
  text-decoration: underline;
}

/* Soft keyboard */
body.keyboard-open .bottom-nav,
body.keyboard-open .footer-note {
  opacity: 0;
  visibility: hidden;
}

body.keyboard-open .stage {
  padding-bottom: 2rem;
}

/* Confetti */
#confetti {
  position: fixed;
  inset: 0;
  z-index: var(--z-confetti);
  pointer-events: none;
}

/* Landscape phones */
@media (max-height: 480px) and (orientation: landscape) {
  .stage {
    place-items: start center;
    align-content: start;
    padding-top: 3.5rem;
    padding-bottom: 5rem;
  }

  .q-title {
    font-size: 1.35rem;
  }

  .q-help {
    margin-bottom: 1rem;
  }
}

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