.container {
    width: 90%;
    min-width: 560px;
    margin: 20px auto;
    font-family: Segoe UI, sans-serif
}

.msg {
    text-align: center;
    font-weight: 700;
}

iframe {
    width: 100%;
    height: 80vh;
    border: 0;
}

/* Header: titolo centrato, CTA fluttuante a destra e verticalmente centrata */
.header {
    position: relative; /* crea il contesto per la CTA assoluta */
    padding: 12px 0 16px; /* spazio sopra/sotto per dare “altezza” all’header */
    text-align: center;
}

    .header h1 {
        margin: 0; /* niente margini che spostano i riferimenti */
        font-size: 18px;
    }

/* Pulsante fluttuante: a destra e centrato verticalmente rispetto all’header */
.float-cta {
    position: absolute;
    right: 0; /* allineato al bordo destro del contenitore (come l’iframe) */
    top: 50%; /* verticale al 50% dell’header */
    transform: translateY(-50%); /* correzione per centrare davvero */
}

/* Stile pulsante */
.btn {
    display: inline-block;
    padding: 12px 18px;
    border-radius: 8px;
    text-decoration: none;
    background: #0b5bd3;
    color: #fff;
    font-weight: 600;
}

    .btn:hover {
        filter: brightness(0.95);
    }

/* Nota sotto l’iframe */
.helper {
    text-align: center;
    margin-top: 8px;
    color: #444;
}

/* Responsive: su schermi stretti metto la CTA sotto il titolo, centrata */
@media (max-width: 1024px) {
    .float-cta {
        position: static;
        transform: none;
        margin-top: 8px;
        display: flex;
        justify-content: center;
    }
}