/* ============ welcome.css: the WELCOME20 popup ===========================
   After Norma's: a picture across the top of the card, then the title, one
   line, a pill field, a full-width pill button, and a small note centred
   under it. The second step is centred: the title,
   the line, the code in a well marked as applied, and the way to the
   card. Site materials only: the paper, the ink pill, the account page's
   field. Nothing here applies while welcome.js has the offer off: the popup
   is only ever built when it is on. */

.wl { position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center;
  padding:16px; background:rgba(19,18,16,.55); overflow-y:auto;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.wl[hidden] { display:none; }
html.wl-open { overflow:hidden; }

.wl-panel { position:relative; width:100%; max-width:400px; box-sizing:border-box; margin:auto; overflow:hidden;
  border-radius:24px; background:var(--paper,#F4F4EF); color:var(--ink,rgb(37,36,32));
  box-shadow:rgba(19,18,16,.3) 0 30px 80px -30px;
  font-family:Satoshi,'Helvetica Neue',Helvetica,Arial,sans-serif; }
.wl-x { position:absolute; z-index:2; top:12px; right:12px; display:grid; place-items:center; width:32px; height:32px;
  border:0; border-radius:100px; background:rgba(255,255,255,.92); color:var(--ink,rgb(37,36,32));
  box-shadow:rgba(19,18,16,.12) 0 2px 8px; font:inherit; font-size:1.15rem; line-height:1; cursor:pointer; }
.wl-x:focus-visible { outline:2px solid var(--tan-text,#8a6046); outline-offset:2px; }

.wl-step[hidden] { display:none; }
.wl-img { display:block; width:100%; height:190px; object-fit:cover; object-position:22% 60%; }
.wl-body { padding:1.5rem 1.6rem 1.4rem; }
.wl-title { margin:0 0 .5rem; font-size:1.5rem; font-weight:900; letter-spacing:-.03em; line-height:1.08; }
/* the tan full stop the site's titles end on */
.wl-dot { color:var(--tan,#c5a28c); }
.wl-text { margin:0 0 1.15rem; font-size:.88rem; line-height:1.45; color:var(--ink-soft,#5f5b54); }
/* step 1: what the signup is, small but readable: it is the consent */
.wl-step-1 .wl-text { margin-top:-.1rem; font-size:.78rem; line-height:1.4; }

.wl-form { display:flex; flex-direction:column; gap:.55rem; }
.wl-form input { width:100%; box-sizing:border-box; padding:.85rem 1.1rem; font:inherit; font-size:.92rem;
  color:var(--ink,rgb(37,36,32)); background:#fff; border:1px solid rgba(154,149,140,.45); border-radius:100px; outline:none;
  transition:border-color .2s var(--ease,cubic-bezier(0.22,1,0.36,1)); }
.wl-form input:focus-visible { border-color:var(--ink,rgb(37,36,32)); }
.wl-form input::placeholder { color:var(--ink-faint,#6d6960); opacity:1; }
.wl-form .pill { width:100%; justify-content:center; background:var(--ink,rgb(37,36,32)); border-color:var(--ink,rgb(37,36,32)); color:#fff; }
.wl-form .pill:hover { background:#000; border-color:#000; }
.wl-err { margin:.5rem 0 0; font-size:.8rem; text-align:center; color:var(--tan-text,#8a6046); }
.wl-err:empty { margin:0; }
.wl-small { margin:.8rem 0 0; font-size:.72rem; text-align:center; color:var(--ink-faint,#6d6960); }

/* the second step */
.wl-step-2 .wl-body { padding:2.2rem 1.6rem 1.6rem; text-align:center; }
.wl-step-2 .wl-text { margin-bottom:1.1rem; }
.wl-codebox { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:0 0 1rem;
  padding:.85rem .9rem .85rem 1.2rem; border-radius:16px; background:#fff; border:1px solid rgba(154,149,140,.3); }
.wl-code { font-size:1.05rem; font-weight:900; letter-spacing:.14em; }
.wl-applied { display:inline-flex; align-items:center; gap:.35rem; font-size:.82rem; font-weight:700; color:var(--tan-text,#8a6046); }
.wl-applied svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.wl-go { width:100%; justify-content:center; box-sizing:border-box; }

@media (max-width:420px) {
  .wl-img { height:160px; }
  .wl-body { padding:1.3rem 1.3rem 1.2rem; }
}