/* ============================================================
   Tinvero — the offer popup.
   Loaded on every page. Mobile-first; the sheet rises from the
   bottom on a phone and is a centred card on a wider screen.
   Every token comes from site.css.
   ============================================================ */

.offr{position:fixed;inset:0;z-index:300;display:none;align-items:flex-end;justify-content:center}
.offr.is-open{display:flex}
.offr_veil{position:absolute;inset:0;background:rgba(8,9,10,.62);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  opacity:0;transition:opacity .4s var(--ease)}
.offr.is-in .offr_veil{opacity:1}

.offr_card{position:relative;width:100%;max-width:560px;background:var(--ink-2);color:var(--bone);
  border:1px solid var(--line-2);border-radius:var(--r-lg) var(--r-lg) 0 0;
  padding:clamp(1.4rem,5vw,2.2rem) clamp(1.2rem,5vw,2.2rem) calc(clamp(1.2rem,4vw,2rem) + env(safe-area-inset-bottom,0px));
  transform:translateY(18px);opacity:0;transition:transform .5s var(--ease),opacity .4s var(--ease);
  max-height:92svh;overflow-y:auto;-webkit-overflow-scrolling:touch}
.offr.is-in .offr_card{transform:none;opacity:1}
/* the tint bar: the five lenses, so the card is recognisably this shop */
.offr_card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;border-radius:var(--r-lg) var(--r-lg) 0 0;
  background:linear-gradient(90deg,#4A4D52 0 20%,#5A3D25 20% 40%,#2A3A55 40% 60%,#6E93B4 60% 80%,#7A3436 80% 100%)}

.offr_close{position:absolute;top:.5rem;right:.5rem;width:44px;height:44px;display:grid;place-items:center;
  border-radius:50%;color:var(--bone-3);font-size:1.5rem;line-height:1;transition:color .2s,background .2s}
.offr_close:hover{color:var(--bone);background:var(--ink-3)}

.offr_eyebrow{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);margin:.4rem 0 .6rem}
.offr_h{font-family:var(--display);font-weight:800;font-size:clamp(1.65rem,6.4vw,2.3rem);line-height:1.02;
  letter-spacing:-.03em;margin:0 0 .6rem;text-wrap:balance}
.offr_lede{color:var(--bone-2);font-size:.95rem;line-height:1.55;margin:0 0 1.1rem;max-width:46ch}
.offr_form{display:flex;flex-wrap:wrap;gap:.5rem}
.offr_form input[type=email]{flex:1 1 220px;min-width:0;min-height:48px;padding:.7rem .9rem;
  background:var(--ink);border:1px solid var(--line-2);border-radius:var(--r);color:var(--bone);font:inherit}
.offr_form input[type=email]::placeholder{color:var(--bone-3)}
.offr_form input[type=email]:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.offr_form button{flex:0 0 auto;min-height:48px}
.offr_hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.offr_status{width:100%;margin:.6rem 0 0;font-size:.86rem;color:var(--bone-2);min-height:1.2em}
.offr_status[data-kind=error]{color:#E8857A}
.offr_terms{margin:.9rem 0 0;font-family:var(--mono);font-size:.66rem;line-height:1.65;letter-spacing:.03em;color:var(--bone-3)}
.offr_terms a{color:inherit;text-decoration:underline}
.offr_no{display:block;margin:.9rem auto 0;font-size:.8rem;color:var(--bone-3);text-decoration:underline;text-underline-offset:3px}
.offr_no:hover{color:var(--bone-2)}

/* ---------- the reveal: shown only after the address is accepted ---------- */
.offr_won{display:none}
.offr.is-won .offr_form,.offr.is-won .offr_intro,.offr.is-won .offr_no{display:none}
.offr.is-won .offr_won{display:block}
.offr_code{display:flex;align-items:center;justify-content:center;gap:.6rem;flex-wrap:wrap;margin:.2rem 0 .9rem}
.offr_code b{font-family:var(--mono);font-size:clamp(1.2rem,5vw,1.55rem);letter-spacing:.14em;color:var(--bone);
  background:var(--ink);border:1px dashed var(--amber);border-radius:var(--r);padding:.55rem .9rem}
.offr_copy{min-height:44px;padding:.5rem .9rem;border:1px solid var(--line-2);border-radius:var(--r);
  font-size:.84rem;color:var(--bone-2);transition:border-color .2s,color .2s}
.offr_copy:hover{color:var(--bone);border-color:var(--bone-3)}
.offr_copy.is-done{color:var(--amber);border-color:var(--amber)}

@media (min-width:640px){
  .offr{align-items:center}
  .offr_card{border-radius:var(--r-lg);transform:translateY(24px) scale(.98)}
  .offr.is-in .offr_card{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .offr_veil,.offr_card{transition:none}
  .offr_card{transform:none;opacity:1}
  .offr_veil{opacity:1}
}

/* click mode: one button instead of a field, centred in the card */
.offr_reveal{width:100%;justify-content:center;margin-inline:auto}
@media (min-width:480px){.offr_reveal{width:auto}}
/* the status line sits under the centred button, so it centres with it */
.offr_form:has(.offr_reveal) .offr_status{text-align:center}

/* "Limited time only" over the code. Amber like the eyebrow so the card has one
   accent rather than two, centred with the code box it belongs to. */
.offr_urgent{margin:.1rem 0 .55rem;text-align:center;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--amber)}
.offr_urgent::before,.offr_urgent::after{content:"·";opacity:.5;margin:0 .5rem}

/* On the prompt it sits under the eyebrow and above the headline, so it reads as part of
   the offer rather than floating over a code box that is not there yet. Left-aligned to
   match the copy it introduces; the one over the code stays centred with the code. */
.offr_urgent--top{text-align:left;margin:-.25rem 0 .7rem}
.offr_urgent--top::before,.offr_urgent--top::after{content:none}
.offr.is-won .offr_urgent--top{display:none}