/* Newsletter Signup — Main Zone (full screen).
 * Warm orange gradient background, white card, big envelope icon, headline,
 * sub-line, scannable QR with corner brackets, optional incentive badge. */

.ns-main {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    /* Background is transparent so the random animated SVG background
     * (assigned by display.py from the SVG_BACKGROUNDS pool) shows through
     * behind the card, like Employee of the Month and other templates. */
    background: transparent;
}

.ns-main-card {
    position: relative;
    z-index: 1;
    color: #1f2937;
    padding: 5cqmin;
    width: 80%;
    height: 70%;
    box-sizing: border-box;
    box-shadow: 0 1.5cqmin 3cqmin rgba(0, 0, 0, 0.18);
    /* Airmail-style envelope border: red / white / blue diagonal stripes
     * around the perimeter, white interior. The border-radius is dropped so
     * the stripes can wrap the corners cleanly. */
    border: 2.8cqmin solid transparent;
    border-radius: 0;
    background-image:
        linear-gradient(#ffffff, #ffffff),
        repeating-linear-gradient(
            45deg,
            #d92020 0 3.5cqmin,
            #ffffff 3.5cqmin 5.5cqmin,
            #1a4ec4 5.5cqmin 9cqmin,
            #ffffff 9cqmin 11cqmin
        );
    background-origin: padding-box, border-box;
    background-clip: padding-box, border-box;
}

/* Sender address — top-left, like the return address on a real envelope. */
.ns-main-sender {
    position: absolute;
    top: 4cqmin;
    left: 4cqmin;
    max-width: 50%;
    /* Match the QR stamp's vertical extent (top: 4cqmin, height: 25cqmin)
     * so the title sits visually centered with the stamp. */
    height: 25cqmin;
    display: flex;
    align-items: center;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 800 !important;
    font-size: 7cqmin !important;
    color: #111827 !important;
    letter-spacing: -0.01em !important;
    line-height: 1.1 !important;
}

/* Recipient address block — center bottom of the card.
 * Each line has an underline rule, mimicking the address lines printed
 * on a real envelope. */
.ns-main-address {
    position: absolute;
    bottom: 6cqmin;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2.5cqmin;
    text-align: center;
}
.ns-main-address-line {
    /* Underline lives on the text itself, not on the line container —
     * so when text wraps to two visual lines you get two rules under it,
     * matching the address-line look on a real envelope. */
    line-height: 2 !important;
    text-decoration: underline solid #1f2937;
    text-decoration-thickness: 0.18cqmin;
    text-underline-offset: 1.6cqmin;
}
.ns-main-address-title {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 800 !important;
    font-size: 4.4cqmin !important;
    color: #111827 !important;
    letter-spacing: -0.01em !important;
}
.ns-main-address-sub {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 500 !important;
    font-size: 3.2cqmin !important;
    color: #4b5563 !important;
}
.ns-main-address-url {
    font-family: 'Roboto Mono', monospace !important;
    font-size: 2.8cqmin !important;
    color: #F97316 !important;
    word-break: break-all;
}
.ns-main-scan {
    font-size: 2.2cqmin !important;
    font-weight: 700 !important;
    font-family: 'Montserrat', sans-serif !important;
    color: #F97316 !important;
}

/* QR sits in the top-right of the card like a postage stamp.
 * Layering: ::before is the perforated white "stamp paper" with a CSS mask
 * that cuts the scalloped edge; the .ns-main-qr sits on top unmasked so
 * the QR pattern itself is never punched through. */
.ns-main-qr-wrap {
    position: absolute;
    top: 4cqmin;
    right: 4cqmin;
    width: 25cqmin;
    height: 25cqmin;
}
.ns-main-qr-wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #ffffff;
    --d: 0.9cqmin;
    -webkit-mask:
        radial-gradient(circle var(--d) at var(--d) var(--d), transparent 98%, #000) 0 0 / calc(2 * var(--d)) calc(2 * var(--d));
    mask:
        radial-gradient(circle var(--d) at var(--d) var(--d), transparent 98%, #000) 0 0 / calc(2 * var(--d)) calc(2 * var(--d));
}
/* Old corner brackets unused in stamp mode. */
.ns-main-qr-corner { display: none; }
.ns-main-qr {
    position: absolute;
    inset: 1.6cqmin;
    background: #ffffff;
    border: 0.4cqmin solid #F97316;
    box-sizing: border-box;
    padding: 0.4cqmin;
    z-index: 1;
}
.ns-main-qr svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Caption directly under the QR stamp. */
.ns-main-scan {
    position: absolute;
    top: calc(4cqmin + 25cqmin + 1cqmin);
    right: 4cqmin;
    width: 25cqmin;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 2.6cqmin;
    color: #F97316;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}