/* Matches the look of profoundinventions.github.io — dark body with a
   black rounded "window" card containing the form. */

*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    background: #333;
    color: #ddd;
    font-family: 'JetBrains Mono', monospace, sans-serif;
    display: flex;
    flex-direction: column;
}

p { line-height: 1.5; margin: .75rem 0; }

a { color: white; text-decoration: none; }

h1, h2, h3, legend {
    font-family: 'DM Sans', sans-serif;
    color: #00f000;
    margin: 0 0 .5rem;
}

strong { color: #00f800; font-weight: bold; }

hr { width: 100%; border: 1px solid #006400; }

/* -------------------------------------------------------------- window */

.window {
    border-radius: 1rem;
    background: #000;
    color: #00c000;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    max-width: 44rem;
    width: 100%;
    margin: 1.8rem auto;
}

@media screen and (min-width: 48rem) {
    .window { margin: 3rem auto; }
}

.window .content {
    padding: 1.4rem 1.25rem;
}

@media screen and (min-width: 48rem) {
    .window .content { padding: 1.8rem 2.4rem; }
}

.window .title-bar {
    text-align: center;
    width: 100%;
    margin-top: -1.2rem;
    padding: .5rem 1.25rem;
    color: #333;
    font-weight: bold;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    background: linear-gradient(to bottom, #f6f8f9 0%, #e5ebee 50%, #d7dee3 51%, #f5f7f9 100%);
}

.window a { color: #6072ff; text-decoration: underline; }

.window h1, .window h2 { text-align: center; }

/* ---------------------------------------------------------------- form */

form.survey { display: flex; flex-direction: column; gap: 1.5rem; }

fieldset {
    border: 1px solid #008000;
    border-radius: .5rem;
    padding: 1rem 1.25rem 1.25rem;
    margin: 0;
    background: #050505;
}

legend {
    padding: 0 .5rem;
    font-size: 1rem;
    line-height: 1.35;
}

.help {
    color: #7aa67a;
    font-size: .85rem;
    margin: .25rem 0 .75rem;
}

.privacy-note {
    color: #7aa67a;
    font-size: .85rem;
    margin: .5rem 0 1.25rem;
}

.error {
    color: #ff6b6b;
    font-size: .85rem;
    margin-top: .4rem;
}

.form-error {
    color: #ffb3b3;
    background: #2a0000;
    border: 1px solid #660000;
    padding: .75rem 1rem;
    border-radius: .4rem;
}

.info-banner {
    color: #9de89d;
    background: #002000;
    border: 1px solid #006000;
    padding: .75rem 1rem;
    border-radius: .4rem;
}

.info-banner a {
    color: #00f000;
    text-decoration: underline;
}

.options {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    margin-top: .25rem;
}

.options.inline { flex-direction: row; flex-wrap: wrap; gap: .25rem 1rem; }

.options label {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: #9de89d;
    cursor: pointer;
}

input[type="radio"], input[type="checkbox"] {
    accent-color: #00c000;
    transform: translateY(1px);
}

input[type="text"],
input[type="email"],
textarea {
    width: 100%;
    background: #333;
    color: #fff;
    border: 2px solid #00b000;
    border-radius: .3rem;
    padding: .5rem .65rem;
    font-family: inherit;
    font-size: .95rem;
    margin-top: .25rem;
}

textarea { resize: vertical; min-height: 5rem; }

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
    outline: none;
    border-color: #00f000;
    box-shadow: 0 0 0 3px rgba(0, 240, 0, .35);
}

.other-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .5rem;
}

.other-row label { white-space: nowrap; color: #9de89d; }

button.primary {
    align-self: flex-start;
    background: #000;
    color: #00f000;
    border: 1px solid #00c000;
    border-radius: .4rem;
    padding: .65rem 1.25rem;
    font-family: inherit;
    font-size: 1rem;
    cursor: pointer;
}

button.primary:hover {
    background: #001800;
    box-shadow: 0 0 0 2px rgba(0, 192, 0, .25);
}

/* ------------------------------------------------------ coupon display */

.coupon {
    display: inline-block;
    margin: 1rem auto;
    padding: 1rem 1.5rem;
    font-size: 1.4rem;
    font-weight: bold;
    letter-spacing: .05em;
    background: #001800;
    color: #00f800;
    border: 2px dashed #00c000;
    border-radius: .5rem;
    text-align: center;
    user-select: all;
}

.coupon-wrap { text-align: center; }

/* -------------------------------------------------------------- footer */

footer {
    color: white;
    text-align: center;
    font-size: .85rem;
    padding: 1rem .75rem 1.25rem;
}

footer a { color: #6072ff; text-decoration: underline; }

/* ------------------------------------------------------------- a11y */

:focus-visible { outline: 2px solid #00c000; outline-offset: 2px; }

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}