/* ============================================================
   Discounts (Signup) page — editorial refresh
   Two-column hero: form on the left, spy character on the right.
   Single big-quote testimonial below.
   ============================================================ */

/* Visually-hidden — accessible label that keeps screen readers happy
   while we use placeholder-as-label visually. */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================
   Hero section (form + spy)
   ============================================================ */

.discounts-hero {
    position: relative;
    overflow: hidden;
    /* Header offset (~80px) + section padding */
    padding-top: calc(80px + var(--section-py));
    padding-bottom: var(--section-py);
}

/* Ember seed-streaks anchored at the LEFT EDGE of the hero, vertically aligned
   with the GET DISCOUNTS headline (not stacked above it). */
.discounts-hero .seed-streaks {
    position: absolute;
    top: clamp(80px, 14vw, 200px);
    left: 0;
    height: clamp(220px, 30vw, 360px);
    width: auto;
    pointer-events: none;
    user-select: none;
    z-index: 1;
}

@media (max-width: 640px) {
    .discounts-hero .seed-streaks { display: none; }
}

.discounts-hero__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-8);
    align-items: center;
    position: relative;
    z-index: 2; /* above seed-streaks */
    /* Shift right so the left-edge seed-streaks don't cover the headline/form */
    padding-left: clamp(0px, 8vw, 140px);
}

@media (min-width: 900px) {
    .discounts-hero__grid {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
        gap: var(--sp-10);
    }
}

.discounts-hero__col {
    min-width: 0;
}

/* ── Headline & lede ── */

.discounts-hero__lede {
    margin-bottom: var(--sp-8);
}

.discounts-hero__headline {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-size: clamp(2.75rem, 6.5vw, 4.5rem);
    line-height: 0.95;
    letter-spacing: -0.01em;
    margin: 0 0 var(--sp-5);
    font-weight: 700;
    display: flex;
    flex-direction: column;
}

.discounts-hero__headline .line-1 {
    color: var(--cream);
}

.discounts-hero__headline .line-2 {
    color: var(--ember);
}

.discounts-hero__sub {
    font-family: var(--font-body);
    font-size: var(--fs-md);
    line-height: var(--lh-body);
    color: color-mix(in oklch, var(--cream) 78%, transparent);
    max-width: 44ch;
    margin: 0;
}

/* ── Spy character on the right ── */

/* Spy guy lives in its own absolutely-positioned column anchored to the
   BOTTOM-RIGHT of the hero section (not center-right of the grid row). */
.discounts-hero__col--spy {
    display: none;
}

@media (min-width: 900px) {
    .discounts-hero__col--spy {
        display: block;
        position: absolute;
        right: clamp(1rem, 4vw, 4rem);
        bottom: 0;
        z-index: 2;
        pointer-events: none;
    }

    /* With the spy absolutely positioned, the form column can take full width */
    .discounts-hero__grid {
        grid-template-columns: 1fr;
    }

    .discounts-hero__col--form {
        max-width: 560px;
    }
}

.discounts-spy {
    display: block;
    width: clamp(200px, 20vw, 300px);
    height: auto;
    filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.45));
}

/* ============================================================
   Form
   ============================================================ */

.discounts-form {
    display: grid;
    gap: var(--sp-md);
    max-width: 520px;
    /* Stone/beige form panel per design — sits on the dark hero bg */
    background: color-mix(in oklch, var(--stone) 45%, var(--cream));
    padding: var(--sp-md) var(--sp-md) var(--sp-lg);
    border-radius: var(--radius-sm);
    color: var(--ink);
}

/* Honeypot — off-screen but not display:none (bots detect that). */
.discounts-form__hp {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Dark-surface field overrides: ember-outlined boxes on ink, cream type. */
.discounts-form .field {
    gap: var(--sp-2);
}

.discounts-form .field > input {
    background: var(--cream);
    border: 1px solid color-mix(in oklch, var(--ink) 80%, var(--stone));
    border-radius: var(--radius-sm);
    color: var(--ink);
    padding: var(--sp-sm) var(--sp-md);
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    width: 100%;
}

.discounts-form .field > input::placeholder {
    color: color-mix(in oklch, var(--ink) 55%, var(--stone));
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 1;
}

.discounts-form .field > input:focus-visible {
    outline: none;
    border-color: var(--ember);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--ember) 25%, transparent);
}

.discounts-form input[type="date"] {
    color-scheme: light;
}

/* Field error text — ember on ink. */
.discounts-form .field-error {
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    letter-spacing: 0;
    text-transform: none;
    color: var(--ember);
    min-height: 1.2em;
}

/* ── Interests (red-bagel checkbox group) ── */

.discounts-form__interests {
    border: 0;
    padding: 0;
    margin: var(--sp-2) 0 0;
    display: grid;
    gap: var(--sp-3);
}

.discounts-form__interests legend {
    color: var(--ink);
    margin-bottom: var(--sp-xs);
    padding: 0;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.8125rem;
    font-weight: 600;
}

.bagel-check {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    cursor: pointer;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: color var(--dur-base) var(--ease-out);
}

.bagel-check:hover,
.bagel-check:focus-within {
    color: var(--ember);
}

/* Custom checkbox: outlined on stone bg, red-bagel SVG on :checked. */
input[type="checkbox"].red-bagel-check {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border: 1px solid color-mix(in oklch, var(--ink) 70%, var(--stone));
    border-radius: var(--radius-sm);
    background: var(--cream);
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    margin: 0;
    transition: border-color var(--dur-base) var(--ease-out),
                background-color var(--dur-base) var(--ease-out);
}

input[type="checkbox"].red-bagel-check:checked {
    background: var(--cream) url("/images/brand/red-bagel-check.svg") center / 16px auto no-repeat;
    border-color: var(--ember);
}

input[type="checkbox"].red-bagel-check:focus-visible {
    outline: none;
    border-color: var(--ember);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--ember) 30%, transparent);
}

/* ── Turnstile + submit row ── */

.discounts-form__turnstile {
    display: flex;
    justify-content: flex-start;
}

.discounts-form__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-3);
    padding-top: var(--sp-2);
}

.discounts-form__actions .btn-ib {
    min-width: 220px;
    padding: 14px 22px;
    font-size: var(--fs-md);
    background: color-mix(in oklch, var(--ink) 80%, var(--stone));
    border-color: color-mix(in oklch, var(--ink) 80%, var(--stone));
    color: var(--cream);
}

.discounts-form__actions .btn-ib:hover,
.discounts-form__actions .btn-ib:focus-visible {
    background: var(--ember);
    border-color: var(--ember);
}

.discounts-form__fine-print {
    font-size: 0.8125rem;
    color: color-mix(in oklch, var(--ink) 60%, var(--stone));
    margin: 0;
}

/* ============================================================
   Reusable signup banners (success / error)
   ============================================================ */

.signup-banner {
    padding: var(--sp-4) var(--sp-5);
    border-radius: var(--radius-md);
    margin-bottom: var(--sp-5);
    font-size: var(--fs-base);
    line-height: var(--lh-body);
    color: var(--cream);
}

.signup-banner:empty {
    display: none;
}

.signup-banner--success {
    background: color-mix(in oklch, #2d7a3f 18%, transparent);
    border: 1px solid color-mix(in oklch, #2d7a3f 40%, transparent);
}

.signup-banner--error {
    background: color-mix(in oklch, var(--ember) 14%, transparent);
    border: 1px solid color-mix(in oklch, var(--ember) 40%, transparent);
    color: color-mix(in oklch, var(--ember) 80%, var(--cream));
}

/* ============================================================
   Testimonial — single big quote on ink
   ============================================================ */

.discounts-testimonial {
    position: relative;
    overflow: hidden;
    background: var(--ink);
    padding-block: var(--section-py);
    border-top: 1px solid color-mix(in oklch, var(--stone) 12%, transparent);
}

/* Reuse the existing seed-streaks rules from home.css — they're loaded
   on the layout? They're not. Redeclare so this page stands alone. */
.discounts-testimonial .seed-streaks {
    position: absolute;
    top: 0;
    height: clamp(220px, 32vw, 400px);
    width: auto;
    pointer-events: none;
    user-select: none;
}

.discounts-testimonial .seed-streaks--left  { left: 0; }
.discounts-testimonial .seed-streaks--right { right: 0; transform: scaleX(-1); }

.discounts-testimonial .seed-streaks--cream {
    filter: brightness(0) invert(94%) sepia(5%) saturate(280%) hue-rotate(2deg) brightness(96%);
}

@media (max-width: 640px) {
    .discounts-testimonial .seed-streaks { display: none; }
}

.discounts-quote {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    color: var(--cream);
    position: relative;
    z-index: 2;
}

.discounts-quote__mark {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(4rem, 8vw, 6.5rem);
    line-height: 0.7;
    color: var(--ember);
    margin: 0 0 var(--sp-3);
    text-align: left;
    font-weight: 600;
}

.discounts-quote__text {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-size: clamp(1.4rem, 3vw, 2.25rem);
    line-height: 1.2;
    letter-spacing: -0.005em;
    margin: 0 0 var(--sp-5);
    font-weight: 600;
    color: var(--cream);
}

.discounts-quote__divider {
    width: 64px;
    height: 2px;
    background: var(--ember);
    border: 0;
    margin: var(--sp-5) auto;
}

.discounts-quote__source {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 0.8125rem;
    color: color-mix(in oklch, var(--cream) 60%, transparent);
}

.discounts-quote__source strong {
    color: var(--ember);
    font-weight: 600;
}