.notice {
    padding: 18px 22px;
    border-radius: 1px;
    background: var(--trim-white);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--door-juniper);
    box-shadow: 0 10px 24px -14px rgba(43, 38, 34, 0.45);
    color: var(--umber-ink);
}

.notice-warn {
    border-left-color: var(--umber-soft);
}

.notice-danger {
    border-left-color: var(--danger);
}

.notice strong {
    display: block;
    margin-bottom: 4px;
}

/* The way out when the way in is broken. A step down from the notice's own
   copy, and given room, so it reads as the second option rather than a
   run-on of the first. */
.notice-aside {
    margin: 10px 0 0;
    font-size: var(--type-label);
    color: var(--umber-soft);
}

/* Fixed regardless of where in the DOM it's rendered (see layouts/_toast),
   it's a stack of cards floating over the page, not part of its flow.
   Top, not bottom: bottom-right went unnoticed and collided with the
   footer's own links once a visitor scrolled that far. 108px clears the
   sticky header (88px + rule) the same way `scroll-padding-top` already
   does for anchors, reusing that number rather than inventing a new one. */
.toast-stack {
    position: fixed;
    top: 108px;
    right: 20px;
    z-index: 100;
    display: grid;
    gap: 12px;
    width: min(380px, calc(100vw - 32px));
}

/* The front-door treatment (.cta-band, .door-panel) turned up for a moment
   that deserves the same confidence: Door Deep fill, trim-white type, the
   same layered inset highlight as the door bands. A flat trim-white card
   with a hairline rule read as one more piece of page furniture; this reads
   as the porch light coming on to say the message landed. */
.toast {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 44px 18px 22px;
    background: var(--door-deep);
    color: var(--trim-white);
    border-radius: 1px;
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 24px 48px -18px rgba(22, 51, 41, 0.6);
    font-size: var(--type-ui);
    font-weight: 500;
    line-height: 1.5;
    /* Drops from above the header it now sits under, the toast's own entry
       point, and settles with a touch of weight (a board landing, not a
       toy sliding). 420ms is deliberately in the overlay range, not routine
       feedback: this is the payoff of the one thing every lead form exists
       to do, and it was going unnoticed at the old position. */
    animation: toast-in 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* The sitewide checklist mark (.checklist li::before), not a new icon: a
   completed lead form is exactly the kind of thing that mark already means.
   It lands a beat after the card, its own small confirmation inside the
   larger one. */
.toast::before {
    content: "";
    flex-shrink: 0;
    width: 14px;
    height: 11px;
    margin-top: 0.3em;
    background: var(--trim-white);
    -webkit-mask: var(--check) center / contain no-repeat;
    mask: var(--check) center / contain no-repeat;
    animation: toast-mark-in 260ms 180ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.toast p {
    flex: 1;
}

/* Danger is already the site's one alarm color (required marks, inline
   field errors); the toast just wears it as a full fill instead of a
   hairline, the same amplification the notice got. No checkmark here,
   that mark means "done," not "something needs attention." */
.toast-alert {
    background: var(--danger);
}

.toast-alert::before {
    content: none;
}

.toast-close {
    position: absolute;
    top: 14px;
    right: 14px;
    flex-shrink: 0;
    border: 0;
    background: none;
    padding: 4px;
    line-height: 1;
    font-size: 1.25rem;
    color: var(--trim-white);
    opacity: 0.7;
    cursor: pointer;
}

.toast-close:hover {
    opacity: 1;
}

/* Exits back the way it came, and faster than it arrived, retreating
   toward the header rather than falling away from it. `animation: none`
   releases opacity/transform from the entrance keyframes' `both` fill,
   without it the transition below never gets a turn at those properties,
   `transitionend` never fires, and the toast (auto-dismiss or the close
   button, both call the same JS) never actually leaves. */
.toast-leaving {
    animation: none;
    transition: opacity 180ms ease-in, transform 180ms ease-in;
    opacity: 0;
    transform: translateY(-16px);
    /* Stops it intercepting clicks meant for whatever's underneath the
       instant it starts leaving, regardless of how long the fade (or its
       removal from the DOM) actually takes. */
    pointer-events: none;
}

@keyframes toast-in {
    from { opacity: 0; transform: translateY(-28px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toast-mark-in {
    from { opacity: 0; transform: scale(0.4); }
    to { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .toast,
    .toast::before {
        animation: none;
    }

    .toast-leaving {
        transition: none;
        opacity: 0;
    }
}

@media only screen and (max-width: 620px) {
    .toast-stack {
        top: 88px;
        right: 12px;
        left: 12px;
        width: auto;
    }
}