/* ===== Modal base ===== */
.modal{ position:fixed; inset:0; display:grid; place-items:center; z-index:1000; opacity:0; pointer-events:none; }
.modal.is-open{ opacity:1; pointer-events:auto; }


.modal__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.20); -webkit-tap-highlight-color:transparent; opacity:0; transition:opacity .18s ease; }
.modal.is-open .modal__backdrop{ opacity:1 }


.modal__panel{ position:relative; width:min(88vw, 520px); background:var(--colorfff); border-radius:1.25rem; padding:2.5rem; transform:scale(.96) translateY(6px); opacity:.98; transition:transform .18s ease, opacity .18s ease; }
.modal.is-open .modal__panel{ transform:scale(1) translateY(0); opacity:1 }
.modal__panel p{
    color: #000;
    text-align: center;
    font-size: 32px;
    font-weight: 400;
    line-height: 130%; /* 41.6px */
    letter-spacing: -1.28px;
    padding: 2.5rem 0;
}

.modal__title{
    color: #000;
    text-align: center;
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 130%; /* 3.25rem */
    letter-spacing: -0.1rem;
    padding: 2.5rem 0;
}


.modal__btn{
    display:block;
    width:100%;
    height:100px;
    border:0;
    border-radius:12px;
    color: #FFF;
    font-size: 2.25rem;
    font-weight: 700;
    letter-spacing: -0.1125rem; 
    cursor:pointer; background:var(--colorD42A54); }
.modal__btn:active{ transform:translateY(1px) }


.modal__close-x{ position:absolute; top:10px; right:10px; width:36px; height:36px; border-radius:50%; border:0; background:#eef0f4; cursor:pointer; }
.modal__close-x::before{ content:'✕'; font-weight:800 }


/* Demo page trigger */
.demo{ padding:24px }
.demo .open{ height:48px; padding:0 16px; border-radius:12px; border:0; background:#111; color:#fff; font-weight:700; }