/* exitpop.css — the exit-intent popup (src/layouts/ExitPopup.tsx).

   Its own file since 2026-09-25, when the popup was added to /about and
   /pricing: those are legacy static pages that load their own stylesheet
   and never home.css, where these rules used to live. Linked from
   Head.tsx for every Layout page, and by static.tsx only on the static
   pages that render the popup.

   Safe beside a legacy page stylesheet for the same reason nav-light.css,
   touch-targets.css and mobile.css are: no :root, no reset, no body{},
   no bare element selectors. Keep it that way. */

.exitpop {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}
.exitpop[hidden] { display: none; }
.exitpop-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 0.2s ease;
}
.exitpop-card {
    position: relative;
    width: min(980px, 100%);
    display: grid;
    /* The photo is 1108x1420 (0.78). A 440px column beside a ~560px-tall
       card is that same shape, so the photo shows nearly whole instead
       of losing the face to a narrow crop (320px did). */
    grid-template-columns: 440px minmax(0, 1fr);
    overflow: hidden;
    background: #F5F2ED;
    color: #16130F;
    border-radius: 20px;
    padding: 0;
    box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.6);
    opacity: 0;
    transform: translateY(12px) scale(0.98);
    transition: opacity 0.2s ease, transform 0.2s ease;
}
/* The photo column. The background shows while the image is still on its
   way, so an early open is a warm panel rather than a hole. */
.exitpop-media {
    position: relative;
    background: #D9CBB9;
    min-height: 100%;
}
.exitpop-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 40%;
}
/* The text side speaks the home hero's language (home.tsx .hx-*): warm
   light ground, Sora 400, a dark split pill with the amber arrow. */
.exitpop-body {
    padding: 2.75rem 2.75rem 2.25rem;
    align-self: center;
    font-family: 'DM Sans', system-ui, sans-serif;
}
.exitpop.is-open .exitpop-backdrop { opacity: 1; }
.exitpop.is-open .exitpop-card { opacity: 1; transform: none; }

.exitpop-x {
    position: absolute;
    z-index: 1;
    top: 0.9rem;
    right: 0.9rem;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: #EAE4D9;
    color: #16130F;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s;
}
.exitpop-x:hover { background: #DFD7C9; }
.exitpop-kick {
    margin: 0 0 0.9rem;
    font-size: 13px;
    font-weight: 500;
    color: #6B645B;
}
.exitpop h2 {
    font-family: 'Sora', sans-serif;
    font-weight: 400;
    font-size: 30px;
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: #16130F;
    margin: 0 0 0.75rem;
    max-width: 16em;
}
.exitpop-sub {
    font-size: 15px;
    line-height: 1.6;
    color: #4A443C;
    margin: 0 0 1.1rem;
}
.exitpop-list {
    list-style: none;
    margin: 0 0 1.6rem;
    padding: 0;
    display: grid;
    gap: 0.45rem;
    font-size: 14.5px;
    color: #2E2822;
}
.exitpop-list li { display: flex; align-items: center; gap: 0.55rem; }
.exitpop-list svg { flex: none; color: #B45309; }
.exitpop-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #16130F;
    margin-bottom: 0.45rem;
}
.exitpop-email {
    display: block;
    width: 100%;
    height: 50px;
    padding: 0 1rem;
    border-radius: 12px;
    border: 1px solid #D9D2C7;
    background: #FFFFFF;
    color: #16130F;
    font-size: 15px;
    font-family: inherit;
    box-sizing: border-box;
}
/* 4.6:1 on white. */
.exitpop-email::placeholder { color: #7A7268; }
.exitpop-email:focus {
    outline: 2px solid #B45309;
    outline-offset: 1px;
    border-color: transparent;
}
.exitpop-send {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 52px;
    margin-top: 0.7rem;
    padding: 0 5px 0 22px;
    border: 0;
    border-radius: 999px;
    background: #16130F;
    color: #FFFFFF;
    font: 600 15px/1 'DM Sans', system-ui, sans-serif;
    cursor: pointer;
    transition: background 0.2s;
}
.exitpop-send:hover { background: #2E2822; }
.exitpop-send:disabled { opacity: 0.6; cursor: default; }
.exitpop-send:focus-visible { outline: 2px solid #B45309; outline-offset: 3px; }
.exitpop-send-icon {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #B45309;
    color: #FFFFFF;
    transition: transform 0.25s ease;
}
.exitpop-send:hover .exitpop-send-icon { transform: rotate(45deg); }
/* Off-screen rather than display:none — a hidden field a bot cannot see
   is not a honeypot. */
.exitpop-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    opacity: 0;
}
.exitpop-note {
    min-height: 1.2em;
    margin: 0.6rem 0 0;
    font-size: 13px;
    color: #4A443C;
}
.exitpop-skip {
    display: inline-block;
    margin-top: 0.4rem;
    font-size: 14px;
    color: #16130F;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.exitpop-skip:hover { color: #B45309; }
.exitpop a:focus-visible, .exitpop-x:focus-visible { outline: 2px solid #B45309; outline-offset: 2px; }

@media (max-width: 1000px) {
    .exitpop-card { width: min(860px, 100%); grid-template-columns: 360px minmax(0, 1fr); }
}
@media (max-width: 720px) {
    .exitpop-card { width: min(520px, 100%); grid-template-columns: 1fr; }
    .exitpop-media { display: none; }
}
@media (max-width: 560px) {
    .exitpop-body { padding: 2rem 1.35rem 1.75rem; }
    .exitpop h2 { font-size: 26px; }
}

/* Reduced motion still gets the popup, just without the movement.
   Reduced motion is not reduced content. */
@media (prefers-reduced-motion: reduce) {
    .exitpop-backdrop,
    .exitpop-card { transition: none; }
    .exitpop-card { transform: none; }
}