:root {
    --maxw: 800px;
    --content-pad: clamp(20px, 5vw, 40px);
    /* Dave's Subdomain Superstore Palette */
    --page-bg: #f7c500;
    --page-bg-2: #ffd93b;
    --card-bg: #fffdf2;
    --text-color: #111111;
    --comic-yellow: #ffd21f;
    --comic-red: #e41e26;
    --comic-blue: #0087e8;
    --comic-black: #111111;
    --comic-white: #ffffff;
    --border-color: #111111;
    --error-bg: #fff0f0;
    --error-border: #e41e26;
    --error-text: #111111;
    --shadow-soft: 8px 8px 0 rgba(0,0,0,.20);
    --shadow-pop-primary: 0 5px 0 #a9151b;
    --shadow-pop-secondary: 0 5px 0 #005ca0;
    --shadow-pop-back: 0 5px 0 #444444;
    --flame-orange: #ff6f00;
}

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    background: radial-gradient( circle at top, #ffd93b 0%, #ffc400 50%, #f7b500 100% );
    font-family: 'Inter', system-ui, sans-serif;
    color: var(--text-color);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

.container {
    width: 100%;
    max-width: var(--maxw);
    margin: 0 auto;
    background: transparent;
    min-height: 100vh;
    overflow: hidden;
}

.banner {
    width: 100%;
    display: block;
    border-bottom: 5px solid #111111;
}

.main {
    padding: 42px var(--content-pad) 56px;
}

.error-message {
    background: var(--error-bg);
    border: 3px solid var(--error-border);
    color: var(--error-text);
    border-radius: 0;
    padding: 14px 18px;
    margin-bottom: 20px;
    font-weight: 800;
    box-shadow: 5px 5px 0 #111111;
}

.box-number-tag {
    display: none;
}

.dialog-box {
    background: var(--card-bg);
    border: 4px solid #111111;
    border-radius: 0;
    padding: 36px;
    margin: 0 auto;
    max-width: 650px;
    min-height: 350px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    box-shadow: 8px 8px 0 #111111;
}

.dialog-question {
    font-size: 1.15rem;
    line-height: 1.8;
    margin: 0 0 28px 0;
    color: var(--text-color);
}

    .dialog-question strong {
        color: var(--comic-red);
        font-weight: 900;
    }

.dialog-input-container {
    margin-bottom: 24px;
}

.inline-email-input {
    width: 100%;
    padding: 14px 16px;
    border-radius: 0;
    border: 3px solid #111111;
    background: #ffffff;
    color: #111111;
    box-sizing: border-box;
    font-size: 1rem;
    font-weight: 600;
}

    .inline-email-input:focus {
        outline: none;
        border-color: var(--comic-blue);
        box-shadow: 0 0 0 4px rgba(0,135,232,.25);
    }

.dialog-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: auto;
}

.btn {
    border: 3px solid #111111;
    cursor: pointer;
    padding: 14px 28px;
    border-radius: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: .95rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    transition: all .15s ease;
}

.btn-primary {
    background: var(--comic-red);
    color: #ffffff;
    box-shadow: var(--shadow-pop-primary);
}

    .btn-primary:hover {
        transform: translateY(-2px);
    }

    .btn-primary:active {
        transform: translateY(4px);
        box-shadow: none;
    }

.btn-secondary {
    background: var(--comic-blue);
    color: #ffffff;
    box-shadow: var(--shadow-pop-secondary);
}

    .btn-secondary:hover {
        transform: translateY(-2px);
    }

    .btn-secondary:active {
        transform: translateY(4px);
        box-shadow: none;
    }

.btn-back {
    background: #ffffff;
    color: #111111;
    box-shadow: var(--shadow-pop-back);
}

    .btn-back:hover {
        background: #f3f3f3;
    }

    .btn-back:active {
        transform: translateY(4px);
        box-shadow: none;
    }

@media (max-width: 560px) {

    .main {
        padding: 24px 16px 40px;
    }

    .dialog-box {
        padding: 24px;
        min-height: 320px;
    }

    .dialog-question {
        font-size: 1.05rem;
    }

    .btn {
        width: 100%;
    }
}