/* Global styles & Variables */
        :root {
            --Black: #000;
            --White: #FFF;
            --Yellow: #E8E46C;
            --Pink: #ED3F8A;
            --LightGray: #C1C1C1;
            --Gray: #808080;
            --DarkGray: #7F7F7F;
            --LightBlue: #DFDFDF; /* A light gray, seems to be used for highlights */
        }

h1 {
    display: none;
}

html {
    overflow-x: hidden; /* Prevent horizontal scroll at the document level */

        body {
            font-family: "Press Start 2P", system-ui;
  font-weight: 400;
  font-style: normal; /* Default to LoRes */
background: var(--Yellow, #E8E46C);

            background-repeat: repeat; /* Ensure the image repeats */
            margin: 0;
            overflow-x: hidden; /* Prevent horizontal scroll from marquees */
            color: var(--Black);
        }
}
main{
    width:318px;
}
.modal-header-container {
    position: relative;
    background: url("images/modal-torn-edge.png");
    background-repeat: no-repeat;
    background-position: left bottom;
    height: 172px;
    padding: 20px;
    box-sizing: border-box;
    z-index: 1;
}

        .modal-header{
            color: var(--black, #000);
font-family: "Press Start 2P";
font-size: 23px;
font-style: normal;
font-weight: 400;
line-height: 32px; /* 139.13% */
text-transform: uppercase;
        }

.modal-header-image {
    position: absolute;
    left: 202px;
    top: 61px;
}
        .modal-subheader{
            color: var(--White, #FFF);
font-family: "Press Start 2P";
font-size: 19px;
font-style: normal;
font-weight: 400;
line-height: 32px; /* 168.421% */
text-transform: uppercase;
padding:0 20px;

        }

        .modal-subheader span{
            display:block;
            color: var(--Pink, #ED3F8A);
font-family: "Press Start 2P";
font-size: 19px;
font-style: normal;
font-weight: 400;
line-height: 32px; /* 168.421% */
text-transform: uppercase;
        }
.modal-subheader span a {
            color: inherit !important; /* Inherit color from parent span */
            text-decoration: none !important; /* Remove underline if mobile adds it */
        }

        .modal-copy{
            color: var(--White, #FFF);
font-family: "Press Start 2P";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 18px; /* 128.571% */
padding:0 20px;
margin-bottom:22px;
        }

        .modal-disclaimer{
            color: var(--White, #FFF);
font-family: "Press Start 2P";
font-size: 7px;
font-style: normal;
font-weight: 400;
line-height: 11px;
padding:0 20px;
        }

.modal-button-holder {
    display: flex;
    align-items: center; /* Vertically align items */
    gap: 13px;
    padding: 0 20px;
    margin-bottom:22px;
}

a.callNow {
    color: var(--Black, #000);
    text-align: center;
    font-family: "Press Start 2P";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 10px;
    text-transform: uppercase;
    text-decoration: none;
    display: flex;
    width: 170px;
    height: 48px;
    padding: 12px 20px;
    justify-content: center;
    align-items: center;
    gap: 12px;
    background: var(--White, #FFF);
    box-shadow: 6px 6px 0px 0px #000, -1px -1px 0px 0px #000 inset, 1px 1px 0px 0px #FFF inset, -2px -2px 0px 0px #7F7F7F inset, 2px 2px 0px 0px #DFDFDF inset;
    box-sizing: border-box;
}

.modal-bottom-container {
    background: #000;
    position: relative;
    z-index: 2;
    top: -17px;
    padding-bottom:15px;
}