/*
 * Agradecimiento del participante (/gracias), sobre la superficie de marca: logos, un check con el
 * degradado de marca, el titular y "Finalizar", justo encima de la cinta. El bloque se centra en
 * el alto libre.
 */
.thanks {
  --decor-ribbon-zone: 150px;

  display: flex;
}

@media (min-width: 768px) {
  .thanks {
    --decor-ribbon-zone: 132px;
  }
}

.thanks__body {
  display: grid;
  flex: 1 0 auto;
  align-content: center;
  justify-items: start;
  padding-block: var(--space-10) var(--space-6);
}

/* Check en un círculo con el degradado de marca y un brillo suave. */
.thanks__icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--brand-magenta), var(--brand-violet) 55%, var(--brand-blue));
  box-shadow:
    -10px 10px 28px -12px var(--brand-magenta-glow),
    10px 10px 28px -12px var(--brand-blue-glow);
  color: var(--brand-on-gradient);
}

.thanks__icon .icon {
  width: 32px;
  height: 32px;
  stroke-width: 2.5;
}

.thanks__title {
  max-width: 9em;
  margin-top: var(--space-6);
  font-size: var(--text-title);
  font-weight: var(--weight-black);
  line-height: var(--text-display-leading);
  letter-spacing: var(--text-display-tracking);
  text-wrap: balance;
}

.thanks__text {
  max-width: 34ch;
  margin-top: var(--space-4);
  color: var(--brand-text-muted);
  font-size: var(--text-lead);
  line-height: var(--text-lead-leading);
}

/* Aviso de cierre: "se cerrará en unos segundos" (ecp) o "ya puedes cerrar" si el navegador no
   deja cerrar la pestaña. */
.thanks__note {
  max-width: 34ch;
  margin-top: var(--space-6);
  color: var(--brand-text-muted);
  font-size: var(--text-small);
  line-height: var(--text-small-leading);
}

.thanks__finish {
  flex: none;
}