/* Handyman.ai on wereno.com: the banner above the header on every page, and the card that rises in the
   bottom-right corner. Handyman.ai's own palette (ink #161616, lime #DDF160, lavender #9F8BE7) and type
   (Funnel Display, Funnel Sans), so they read as the new product rather than as more WeReno chrome.
   Everything is namespaced .hmp- and carries its own resets, because the WordPress theme styles bare
   p and a tags. */

/* ── the banner ─────────────────────────────────────────────────────────────────────────────── */
.hmp-bar { position: relative; z-index: 1001; overflow: hidden; background: #161616; color: #faf7f6;
  font-family: "Funnel Sans", ui-sans-serif, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
.hmp-bar::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(221, 241, 96, .14) 46%, rgba(159, 139, 231, .16) 56%, transparent 70%);
  transform: translateX(-70%); animation: hmp-sheen 7s ease-in-out infinite; }
.hmp-bar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, #ddf160 30%, #9f8be7 70%, transparent); opacity: .55; }
@keyframes hmp-sheen { 0%, 18% { transform: translateX(-70%); } 62%, 100% { transform: translateX(70%); } }
.hmp-bar .hmp-bar__in { position: relative; z-index: 2; pointer-events: none; display: flex; align-items: center; justify-content: center; gap: 12px;
  max-width: 1180px; min-height: 46px; margin: 0 auto; padding: 7px 16px; }
.hmp-bar .hmp-bar__new { flex: none; padding: 4px 9px 3px; border-radius: 999px; background: #ddf160; color: #161616;
  font-family: "Funnel Display", ui-sans-serif, system-ui, sans-serif; font-size: 11px; font-weight: 800; line-height: 1;
  letter-spacing: .09em; text-transform: uppercase; box-shadow: 0 0 18px rgba(221, 241, 96, .45); }
.hmp-bar .hmp-bar__ic { flex: none; display: block; width: 26px; height: 26px; border-radius: 8px; }
.hmp-bar .hmp-bar__t { min-width: 0; margin: 0; padding: 0; font-size: 14px; line-height: 1.3; color: rgba(250, 247, 246, .82); }
.hmp-bar .hmp-bar__t b { font-family: "Funnel Display", ui-sans-serif, system-ui, sans-serif; font-weight: 700; color: #fff; }
.hmp-bar .hmp-bar__short { display: none; }
.hmp-bar a.hmp-bar__go { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px 7px 15px; border-radius: 999px;
  background: linear-gradient(135deg, #e7f77a, #ddf160 45%, #c9e43f); color: #161616; font-size: 13.5px; font-weight: 700; line-height: 1;
  text-decoration: none; white-space: nowrap; box-shadow: 0 6px 18px rgba(221, 241, 96, .26); transition: transform .15s ease, box-shadow .15s ease; }
.hmp-bar a.hmp-bar__go:hover { color: #161616; transform: translateY(-1px); box-shadow: 0 10px 26px rgba(221, 241, 96, .42); }
.hmp-bar a.hmp-bar__go svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.hmp-bar a.hmp-bar__story { flex: none; font-size: 13.5px; font-weight: 500; color: #c9bff6; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.hmp-bar a.hmp-bar__story:hover { color: #fff; }
.hmp-bar a:focus-visible { outline: 2px solid #ddf160; outline-offset: 3px; }
/* The whole bar opens the story on /handyman: a link under everything, the words and icon let taps
   through to it, and only the buttons take their own (Try it free still goes to handyman.ai). */
.hmp-bar .hmp-bar__hit { position: absolute; inset: 0; z-index: 1; }
.hmp-bar .hmp-bar__hit:focus-visible { outline: 2px solid #ddf160; outline-offset: -3px; }
.hmp-bar .hmp-bar__in a { pointer-events: auto; }
body.page-id-handyman .hmp-bar .hmp-bar__hit { display: none; }
@media (max-width: 860px) { .hmp-bar .hmp-bar__story { display: none; } }
/* on the announcement itself, "Read the story" would link to the page you are reading */
body.page-id-handyman .hmp-bar .hmp-bar__story { display: none; }
@media (max-width: 640px) {
  .hmp-bar .hmp-bar__in { gap: 9px; padding: 7px 12px; }
  .hmp-bar .hmp-bar__long { display: none; }
  .hmp-bar .hmp-bar__short { display: inline; }
  .hmp-bar .hmp-bar__t { font-size: 13px; }
  .hmp-bar a.hmp-bar__go { padding: 7px 12px; font-size: 13px; }
}
@media (max-width: 380px) { .hmp-bar .hmp-bar__ic { display: none; } }


/* The theme's phone menu is a full-screen drawer (fixed, z-index 11), so the banner (1001) sat over its top
   row and hid the logo and the close button. The drawer goes over the banner and the card instead. */
.uicore-navigation-wrapper.uicore-mobile-menu-wrapper { z-index: 100001 !important; }

/* ── the card ──────────────────────────────────────────────────────────────────────────────── */
.hmp-pop { position: fixed; right: 24px; bottom: 24px; z-index: 100000; width: 348px; max-width: calc(100vw - 32px);
  overflow: hidden; border-radius: 24px; background: #161616; color: #faf7f6;
  box-shadow: 0 30px 80px rgba(10, 10, 10, .45), 0 0 0 1px rgba(255, 255, 255, .08), 0 0 60px rgba(221, 241, 96, .12);
  font-family: "Funnel Sans", ui-sans-serif, system-ui, sans-serif; -webkit-font-smoothing: antialiased;
  opacity: 0; transform: translateY(24px) scale(.97); transition: opacity .45s ease, transform .55s cubic-bezier(.2, .9, .25, 1.15); }
.hmp-pop.is-in { opacity: 1; transform: none; }
.hmp-pop[hidden] { display: none !important; }
.hmp-pop .hmp-pop__media { position: relative; aspect-ratio: 540 / 310; background: #1c1c1c; }
.hmp-pop .hmp-pop__media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.hmp-pop .hmp-pop__media::after { content: ""; position: absolute; inset: auto 0 0; height: 40%; pointer-events: none;
  background: linear-gradient(to top, #161616, rgba(22, 22, 22, 0)); }
.hmp-pop .hmp-pop__badge { position: absolute; left: 14px; top: 14px; z-index: 1; padding: 5px 10px 4px; border-radius: 999px;
  background: rgba(22, 22, 22, .72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(221, 241, 96, .45);
  color: #ddf160; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1; }
.hmp-pop .hmp-pop__x { position: absolute; right: 12px; top: 12px; z-index: 2; display: grid; place-items: center; width: 32px; height: 32px; padding: 0;
  border: 0; border-radius: 50%; background: rgba(22, 22, 22, .66); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; cursor: pointer;
  transition: background .15s ease; }
.hmp-pop .hmp-pop__x:hover { background: rgba(22, 22, 22, .9); }
.hmp-pop .hmp-pop__x svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.hmp-pop .hmp-pop__body { padding: 4px 22px 22px; }
.hmp-pop .hmp-pop__brand { display: flex; align-items: center; gap: 9px; margin: 0 0 10px; font-family: "Funnel Display", ui-sans-serif, system-ui, sans-serif;
  font-size: 15px; font-weight: 700; color: #fff; }
.hmp-pop .hmp-pop__brand img { display: block; width: 28px; height: 28px; border-radius: 9px; }
.hmp-pop .hmp-pop__name { color: #fff; }
.hmp-pop .hmp-pop__name span { color: #ddf160; }
.hmp-pop .hmp-pop__t { margin: 0 0 8px; padding: 0; font-family: "Funnel Display", ui-sans-serif, system-ui, sans-serif; font-size: 23px; font-weight: 700;
  line-height: 1.12; letter-spacing: -.02em; color: #fff; text-wrap: balance; }
.hmp-pop .hmp-pop__p { margin: 0 0 18px; padding: 0; font-size: 14.5px; line-height: 1.5; color: rgba(250, 247, 246, .74); }
.hmp-pop .hmp-pop__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.hmp-pop a.hmp-pop__go { display: inline-flex; align-items: center; gap: 7px; padding: 12px 18px; border-radius: 999px; text-decoration: none;
  background: linear-gradient(135deg, #e7f77a, #ddf160 45%, #c9e43f); color: #161616; font-size: 14.5px; font-weight: 700; line-height: 1;
  box-shadow: 0 10px 26px rgba(221, 241, 96, .3); transition: transform .15s ease, box-shadow .15s ease; }
.hmp-pop a.hmp-pop__go:hover { color: #161616; transform: translateY(-1px); box-shadow: 0 14px 32px rgba(221, 241, 96, .45); }
.hmp-pop a.hmp-pop__go svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.hmp-pop a.hmp-pop__more { font-size: 14px; font-weight: 500; color: #c9bff6; text-decoration: underline; text-underline-offset: 3px; }
.hmp-pop a.hmp-pop__more:hover { color: #fff; }
.hmp-pop a:focus-visible, .hmp-pop button:focus-visible { outline: 2px solid #ddf160; outline-offset: 3px; }
.hmp-pop .hmp-pop__by { margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid rgba(255, 255, 255, .08); font-size: 12px; color: rgba(250, 247, 246, .5); }
/* the theme's back-to-top button sits in the same corner */
body.hmp-pop-open #uicore-back-to-top { opacity: 0 !important; pointer-events: none !important; }
/* on a laptop the card's words sit centred under the clip: brand, headline, line, buttons and byline */
@media (min-width: 641px) {
  .hmp-pop .hmp-pop__body { text-align: center; }
  .hmp-pop .hmp-pop__brand, .hmp-pop .hmp-pop__acts { justify-content: center; }
}
/* a phone: a compact card along the bottom, the clip beside the words rather than above them */
@media (max-width: 640px) {
  .hmp-pop { left: 12px; right: 12px; bottom: 12px; width: auto; max-width: none; display: grid; grid-template-columns: 112px minmax(0, 1fr); border-radius: 20px; }
  .hmp-pop .hmp-pop__media { aspect-ratio: auto; min-height: 100%; }
  .hmp-pop .hmp-pop__media::after, .hmp-pop .hmp-pop__badge, .hmp-pop .hmp-pop__p, .hmp-pop .hmp-pop__by, .hmp-pop .hmp-pop__brand { display: none; }
  .hmp-pop .hmp-pop__body { padding: 14px 44px 14px 14px; }
  .hmp-pop .hmp-pop__t { margin-bottom: 10px; font-size: 16px; }
  .hmp-pop .hmp-pop__acts { gap: 8px 12px; }
  .hmp-pop a.hmp-pop__go { padding: 9px 13px; font-size: 13px; }
  .hmp-pop a.hmp-pop__more { font-size: 13px; }
  .hmp-pop .hmp-pop__x { right: 8px; top: 8px; width: 28px; height: 28px; background: rgba(255, 255, 255, .08); }
}
@media (prefers-reduced-motion: reduce) {
  .hmp-bar::before { animation: none; display: none; }
  .hmp-pop { transition: opacity .2s ease; transform: none; }
  .hmp-bar a.hmp-bar__go, .hmp-pop a.hmp-pop__go { transition: none; }
}