/* ============================================================
   The email capture band.

   Sits quietly above the footer. It is not a popup, it never covers
   the page, there is nothing to dismiss, and it does not follow the
   scroll. Someone who ignores it loses nothing and is not asked twice.

   What makes it worth a visitor's time is that it hands over a real
   thing on the spot — the licence key for the Candle Countdown — rather
   than promising an email that may or may not arrive.

   It also changes with who is reading it. Someone who has already
   claimed sees the trial offer instead of the same ask again, and a
   signed-in customer sees nothing at all.
   ============================================================ */

.picap{margin:56px 0 8px;position:relative}
.picap-in{
  position:relative;overflow:hidden;
  border:1px solid var(--line);border-radius:18px;
  background:linear-gradient(135deg,rgba(47,122,240,.10),rgba(24,201,232,.05));
  padding:26px 28px}
/* a single hairline of light along the top edge, same as the rest of the site */
.picap-in:before{content:'';position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(143,184,255,.5),transparent)}

.picap-row{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.picap-say{flex:1 1 300px;min-width:0}
.picap-tag{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.14em;
  color:#7fd8b0;border:1px solid rgba(53,168,119,.45);border-radius:99px;
  padding:2px 9px;margin-bottom:9px}
.picap-say h3{font-size:20px;line-height:1.3;font-weight:800;color:var(--text);margin:0 0 5px}
.picap-say p{font-size:13.5px;line-height:1.55;color:var(--dim);margin:0;max-width:52ch}

.picap-do{flex:0 1 380px;min-width:260px}
.picap-form{display:flex;gap:8px;flex-wrap:wrap}
.picap-form input{
  flex:1 1 190px;min-width:0;
  background:rgba(0,0,0,.30);border:1px solid var(--line);border-radius:11px;
  color:var(--text);font:inherit;font-size:14px;padding:11px 13px;
  transition:border-color .2s ease,box-shadow .2s ease}
.picap-form input::placeholder{color:rgba(143,163,196,.65)}
.picap-form input:focus{outline:0;border-color:rgba(143,184,255,.55);
  box-shadow:0 0 0 3px rgba(47,122,240,.16)}
.picap-btn{
  flex:0 0 auto;cursor:pointer;border:0;border-radius:11px;
  background:linear-gradient(135deg,#2f7af0,#18c9e8);color:#fff;
  font:inherit;font-size:14px;font-weight:800;padding:11px 20px;
  transition:transform .18s ease,box-shadow .18s ease,opacity .18s ease;
  box-shadow:0 6px 18px rgba(46,144,250,.28)}
.picap-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 10px 24px rgba(46,144,250,.42)}
.picap-btn:disabled{opacity:.55;cursor:default;transform:none}

.picap-fine{margin-top:9px;font-size:11.5px;color:rgba(143,163,196,.85);line-height:1.5}
.picap-err{margin-top:9px;font-size:12.5px;color:#ffb4ae;line-height:1.5}

/* the key, once they have it */
.picap-key{
  margin-top:12px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:rgba(0,0,0,.34);border:1px dashed rgba(143,184,255,.4);
  border-radius:11px;padding:11px 13px}
.picap-key code{font-family:var(--mono,ui-monospace,Consolas,monospace);
  font-size:14px;letter-spacing:.02em;color:#8ef0ff;word-break:break-all;flex:1 1 200px}
.picap-copy{flex:0 0 auto;cursor:pointer;border:1px solid var(--line);border-radius:9px;
  background:rgba(255,255,255,.05);color:var(--text);font:inherit;font-size:12.5px;
  font-weight:700;padding:7px 13px;transition:background .18s ease}
.picap-copy:hover{background:rgba(255,255,255,.11)}

/* each step replaces the one before it rather than stacking */
.picap-step{animation:picapin .4s cubic-bezier(.22,.8,.24,1) both}
@keyframes picapin{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

@media(max-width:760px){
  .picap{margin-top:40px}
  .picap-in{padding:22px 20px}
  .picap-row{gap:18px}
  .picap-say h3{font-size:18px}
  .picap-form input{flex:1 1 100%}
  .picap-btn{flex:1 1 100%}
}

@media(prefers-reduced-motion:reduce){
  .picap-step{animation:none}
  .picap-btn{transition:none}
}
