/* offer-pop.css
   The founder offer pop. A small non-modal panel that slides in from the right
   on desktop once the visitor has scrolled past 60% of the first screen, and a
   slim bar along the bottom on phones. Never covers the hero. The pop waits for
   the cookie pill to go before it shows, so bars park rather than stack, and on
   phones it carries its own call and WhatsApp buttons so the route to the phone
   stays reachable while the sticky contact bar is parked.
   Built by /assets/offer-pop.js from the inline offer-config JSON.
   British English. No long dashes in this file. */

.offer-pop{
  position:fixed;right:1.1rem;bottom:1.1rem;z-index:60;width:min(340px,calc(100vw - 2.2rem));
  background:#fcfcfb;color:#181818;border:1px solid rgba(24,24,24,.12);
  border-radius:16px;padding:1rem 1rem .9rem;
  box-shadow:0 18px 44px rgba(0,0,0,.18);
  transform:translateX(calc(100% + 1.6rem));opacity:0;
  transition:transform .42s cubic-bezier(.22,.7,.3,1),opacity .3s ease;
}
.offer-pop.is-open{transform:none;opacity:1}
.offer-pop[hidden]{display:none}

.offer-pop-line{font-size:.98rem;line-height:1.45;font-weight:650;margin:0 2rem .2rem 0}
.offer-pop-sub{font-size:.82rem;color:#54524e;margin:.15rem 0 .7rem}

.offer-pop-code{
  display:flex;align-items:center;gap:.5rem;margin:0 0 .75rem;
  background:#f3f3f1;border:1px dashed rgba(24,24,24,.22);border-radius:10px;padding:.45rem .5rem .45rem .7rem;
}
.offer-pop-code b{font-size:1rem;letter-spacing:.12em;font-weight:800}
.offer-pop-copy{
  margin-left:auto;border:1px solid rgba(24,24,24,.18);background:#fff;color:#181818;
  border-radius:999px;padding:.32rem .7rem;font-size:.8rem;font-weight:700;cursor:pointer;
}
.offer-pop-copy:hover{border-color:#181818}
.offer-pop-copy[data-done="1"]{background:#f5c842;border-color:#f5c842}

.offer-pop-row{display:flex;gap:.5rem;flex-wrap:wrap}
.offer-pop-row a{
  flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  min-height:42px;border-radius:999px;font-weight:700;font-size:.88rem;padding:0 .9rem;
}
.offer-pop-wa{background:#f5c842;color:#141004}
.offer-pop-see{border:1px solid rgba(24,24,24,.2);color:#181818}
.offer-pop-see:hover{border-color:#181818}
/* The call route rides inside the pop, so the phone is always one tap away even
   while the sticky contact bar is parked underneath it. */
.offer-pop-call{border:1px solid rgba(24,24,24,.2);color:#181818}
.offer-pop-call:hover{border-color:#181818}

.offer-pop-x{
  position:absolute;top:.5rem;right:.5rem;width:30px;height:30px;border-radius:50%;
  border:1px solid rgba(24,24,24,.14);background:#fff;color:#54524e;
  font-size:1rem;line-height:1;cursor:pointer;
}
.offer-pop-x:hover{color:#181818;border-color:#181818}
.offer-pop :focus-visible{outline:2px solid #8a5200;outline-offset:2px}

/* Phones: a slim bar along the bottom, never a box over the hero. The sticky
   mobile contact bar is hidden while the pop is open so the two never stack. */
@media (max-width:720px){
  .offer-pop{
    right:0;left:0;bottom:0;width:auto;border-radius:0;
    border-left:0;border-right:0;border-bottom:0;
    padding:.55rem .75rem calc(.55rem + env(safe-area-inset-bottom));
    transform:translateY(100%);box-shadow:0 -10px 30px rgba(0,0,0,.16);
  }
  .offer-pop.is-open{transform:none}
  .offer-pop-line{font-size:.88rem;margin:0 1.9rem .35rem 0;line-height:1.35}
  .offer-pop-sub{display:none}
  .offer-pop-code{margin-bottom:.45rem;padding:.3rem .4rem .3rem .6rem}
  .offer-pop-code b{font-size:.9rem}
  .offer-pop-row a{min-height:40px;font-size:.85rem}
  .offer-pop-x{top:.35rem;right:.45rem;width:28px;height:28px}
  .offer-pop-row a{flex:1 1 30%;padding:0 .5rem}
  /* The sticky contact bar parks while the pop is open. Nothing stacks, and the
     call and WhatsApp buttons inside the pop keep the phone one tap away. */
  body.offer-pop-open .mbar{display:none}
}

@media (prefers-reduced-motion:reduce){
  .offer-pop{transition:none;transform:none;opacity:0}
  .offer-pop.is-open{opacity:1}
}

/* Parked, while a review is on screen. The panel is inert in script; this
   belt and braces keeps its buttons out of the tab order in any browser that
   does not honour the inert attribute. */
.offer-pop.is-parked{visibility:hidden}