/* Clickpad on wereno.com: the card that rises in the bottom-right corner and the film it plays. The Handyman.ai
   card's CSS (wr-handyman-promo.css, removed in 5dec8e9) with Clickpad's violet (#6A00F8) where Handyman's lime was;
   same ink (#161616), type (Funnel Display, Funnel Sans), sizes and motion. Namespaced .cpp- (the card) and .cpf-
   (the film), with their own resets, because the WordPress theme styles bare p and a tags. */

/* 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 ──────────────────────────────────────────────────────────────────────────────── */
.cpp-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(106, 0, 248, .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); }
.cpp-pop.is-in { opacity: 1; transform: none; }
.cpp-pop[hidden] { display: none !important; }
.cpp-pop .cpp-pop__media { position: relative; aspect-ratio: 540 / 310; background: #1c1c1c; }
.cpp-pop .cpp-pop__media video { display: block; width: 100%; height: 100%; object-fit: cover;
  background: center / cover no-repeat; }  /* the still, painted by the script, shows until the first frame */
.cpp-pop .cpp-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)); }
/* The picture is the film's muted tease, and all of it is the play button: a violet disc with "See how it works · 24 s"
   in the middle, the disc alone on a phone. */
.cpp-pop button.cpp-pop__play { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  margin: 0; padding: 0 0 18px; border: 0; border-radius: 0; background: transparent; color: #fff; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cpp-pop .cpp-pop__play .cpp-pop__pl { position: relative; z-index: 1; flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: #6a00f8; color: #fff; box-shadow: 0 8px 22px rgba(10, 10, 10, .35); animation: cpp-pulse 1.8s ease-out infinite; transition: transform .2s ease; }
.cpp-pop .cpp-pop__play .cpp-pop__pl svg { width: 18px; height: 18px; margin-left: 2px; }
.cpp-pop .cpp-pop__play .cpp-pop__pt { margin-left: -10px; padding: 8px 15px 8px 20px; border-radius: 0 999px 999px 0; background: rgba(22, 22, 22, .82);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-family: "Funnel Display", ui-sans-serif, system-ui, sans-serif; font-size: 14px; font-weight: 700;
  line-height: 1; white-space: nowrap; box-shadow: 0 8px 22px rgba(10, 10, 10, .3); }
.cpp-pop .cpp-pop__play .cpp-pop__pt span { margin-left: 7px; font-weight: 500; color: rgba(250, 247, 246, .7); }
.cpp-pop .cpp-pop__play .cpp-pop__pt span::before { content: "·"; margin-right: 7px; }
.cpp-pop button.cpp-pop__play:hover .cpp-pop__pl { transform: scale(1.06); }
.cpp-pop button.cpp-pop__play:focus-visible { outline: none; }
.cpp-pop button.cpp-pop__play:focus-visible .cpp-pop__pl { outline: 2px solid #a77bff; outline-offset: 3px; }
@keyframes cpp-pulse { from { box-shadow: 0 8px 22px rgba(10, 10, 10, .35), 0 0 0 0 rgba(106, 0, 248, .55); } to { box-shadow: 0 8px 22px rgba(10, 10, 10, .35), 0 0 0 12px rgba(106, 0, 248, 0); } }
.cpp-pop .cpp-pop__badge { position: absolute; left: 14px; top: 14px; z-index: 2; pointer-events: none; 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(138, 59, 255, .7);
  color: #c4a6ff; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1; }
.cpp-pop .cpp-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; }
.cpp-pop .cpp-pop__x:hover { background: rgba(22, 22, 22, .9); }
.cpp-pop .cpp-pop__x svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.cpp-pop .cpp-pop__body { padding: 4px 22px 22px; }
.cpp-pop .cpp-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; }
.cpp-pop .cpp-pop__brand img { display: block; width: auto; height: 24px; }
.cpp-pop .cpp-pop__name { font-family: "Funnel Sans", ui-sans-serif, system-ui, sans-serif; font-size: 13.5px; font-weight: 500; color: rgba(250, 247, 246, .62); }

.cpp-pop .cpp-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; }
.cpp-pop .cpp-pop__p { margin: 0 0 18px; padding: 0; font-size: 14.5px; line-height: 1.5; color: rgba(250, 247, 246, .74); }
.cpp-pop .cpp-pop__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.cpp-pop a.cpp-pop__go { display: inline-flex; align-items: center; gap: 7px; padding: 12px 18px; border-radius: 999px; text-decoration: none;
  background: linear-gradient(135deg, #8a3bff, #6a00f8 45%, #5600cc); color: #fff; font-size: 14.5px; font-weight: 700; line-height: 1;
  box-shadow: 0 10px 26px rgba(106, 0, 248, .3); transition: transform .15s ease, box-shadow .15s ease; }
.cpp-pop a.cpp-pop__go:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 14px 32px rgba(106, 0, 248, .45); }
.cpp-pop a.cpp-pop__go svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cpp-pop a.cpp-pop__more { font-size: 14px; font-weight: 500; color: #c4a6ff; text-decoration: underline; text-underline-offset: 3px; }
.cpp-pop a.cpp-pop__more:hover { color: #fff; }
.cpp-pop a:focus-visible, .cpp-pop button:focus-visible { outline: 2px solid #a77bff; outline-offset: 3px; }
.cpp-pop .cpp-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.cpp-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) {
  .cpp-pop .cpp-pop__body { text-align: center; }
  .cpp-pop .cpp-pop__brand, .cpp-pop .cpp-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) {
  .cpp-pop { left: 12px; right: 12px; bottom: 12px; width: auto; max-width: none; display: grid; grid-template-columns: 112px minmax(0, 1fr); border-radius: 20px; }
  .cpp-pop .cpp-pop__media { aspect-ratio: auto; min-height: 100%; }
  .cpp-pop .cpp-pop__media::after, .cpp-pop .cpp-pop__badge, .cpp-pop .cpp-pop__p, .cpp-pop .cpp-pop__by, .cpp-pop .cpp-pop__brand { display: none; }
  .cpp-pop .cpp-pop__body { padding: 14px 44px 14px 14px; }
  .cpp-pop .cpp-pop__t { margin-bottom: 10px; font-size: 16px; }
  .cpp-pop .cpp-pop__acts { gap: 8px 12px; }
  .cpp-pop a.cpp-pop__go { padding: 9px 13px; font-size: 13px; }
  .cpp-pop a.cpp-pop__more { font-size: 13px; }
  .cpp-pop .cpp-pop__x { right: 8px; top: 8px; width: 28px; height: 28px; background: rgba(255, 255, 255, .08); }
  /* the tease's lead card sits left of its frame's centre, so the narrow picture keeps it in view */
  .cpp-pop .cpp-pop__media video { object-position: 28% 50%; background-position: 28% 50%; }
  .cpp-pop button.cpp-pop__play { padding: 0; }
  .cpp-pop .cpp-pop__play .cpp-pop__pt { display: none; }
  .cpp-pop .cpp-pop__play .cpp-pop__pl { width: 44px; height: 44px; }
}

/* ── the film (wr-clickpad-promo.js, 2) ─────────────────────────────────────────────────────── */
/* The film's room and controls, as the Handyman card had them: a dark room, the film as large as fits with the ×
   above it, nothing fading in or out. Above the card and the theme's phone menu. */
.cpf-room { position: fixed; inset: 0; z-index: 100010; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(14, 13, 18, .88); font-family: "Funnel Sans", ui-sans-serif, system-ui, sans-serif; -webkit-tap-highlight-color: transparent; }
.cpf-room .cpf-col { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; width: min(1120px, 100%, calc((100vh - 100px) * 16 / 9)); }
@supports (height: 100dvh) {
  .cpf-room .cpf-col { width: min(1120px, 100%, calc((100dvh - 100px) * 16 / 9)); }
}
/* A phone: the 16:9 film at the screen's width, in the middle of the screen the person can see (100dvh), with the dim
   reaching under the browser's see-through bars; held upright, "Watch in full screen" floats under it. */
@media (max-width: 767px) {
  .cpf-room { bottom: auto; height: 100vh; height: 100dvh; box-shadow: 0 0 0 100vmax rgba(14, 13, 18, .88); }
}
.cpf-room button.cpf-fs { display: none; align-self: center; align-items: center; justify-content: center; gap: 8px; min-height: 44px; margin: 6px 0 0;
  padding: 0 20px; border: 0; border-radius: 999px; background: #fff; color: #161616; font: 600 15px/1 "Funnel Sans", ui-sans-serif, system-ui, sans-serif;
  white-space: nowrap; cursor: pointer; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .5); }
.cpf-room button.cpf-fs svg { flex: none; width: 18px; height: 18px; }
.cpf-room button.cpf-fs:focus-visible { outline: 3px solid #a77bff; outline-offset: 3px; }
@media (max-width: 767px) and (orientation: portrait) { .cpf-room button.cpf-fs { display: inline-flex; } }
@media (min-width: 640px) {
  .cpf-room { padding: 24px; }
  .cpf-room .cpf-col { width: min(1120px, 100%, calc((100vh - 140px) * 16 / 9)); }
  @supports (height: 100dvh) { .cpf-room .cpf-col { width: min(1120px, 100%, calc((100dvh - 140px) * 16 / 9)); } }
}
.cpf-room button.cpf-x { flex: none; display: grid; place-items: center; width: 48px; height: 48px; margin: 0; padding: 0;
  border: 0; border-radius: 50%; background: #fff; color: #161616; cursor: pointer; transition: background .15s ease; }
.cpf-room button.cpf-x:hover { background: #6a00f8; color: #fff; }
.cpf-room button.cpf-x svg svg { width: 20px; height: 20px; }
.cpf-room button.cpf-x:focus-visible:focus-visible { outline: 3px solid #a77bff; outline-offset: 3px; }
.cpf-room .cpf-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 16px; background: #f0f5f0; }
.cpf-room .cpf-video { display: block; width: 100%; height: 100%; object-fit: cover; background: #f0f5f0; }
html.cpf-open, html.cpf-open body { overflow: hidden; }
/* the controls: play and pause at the bottom left, full screen at the bottom right, a seek bar between, on a soft
   shade that fades while the film plays */
.cpf-vc-host .cpf-vc { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; align-items: center; gap: 12px;
  padding: 40px 16px 14px; pointer-events: auto; transition: opacity .35s ease;
  background: linear-gradient(to top, rgba(14, 13, 18, .58), rgba(14, 13, 18, 0)); }
.cpf-vc-host.is-idle .cpf-vc { opacity: 0; }
.cpf-vc-host.is-idle .cpf-vc * { pointer-events: none; }
.cpf-vc-host.is-idle { cursor: none; }
.cpf-vc-host button.cpf-vc__btn { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .2); color: #fff; cursor: pointer; transition: background .2s, transform .2s;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.cpf-vc-host button.cpf-vc__btn:hover { background: rgba(255, 255, 255, .32); }
.cpf-vc-host button.cpf-vc__btn:active { transform: scale(.94); }
.cpf-vc-host .cpf-vc__btn svg { display: block; width: 20px; height: 20px; }
/* the sound, on and off, top right of the film (Handyman's old mute button) */
.cpf-vc-host button.cpf-vc__mute { position: absolute; top: 12px; right: 12px; z-index: 4; display: grid; place-items: center; width: 44px; height: 44px;
  margin: 0; padding: 0; border: 0; border-radius: 50%; background: rgba(22, 22, 22, .5); color: #fff; cursor: pointer;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: opacity .35s ease, background .2s, transform .2s; }
.cpf-vc-host button.cpf-vc__mute:hover { background: rgba(22, 22, 22, .7); }
.cpf-vc-host button.cpf-vc__mute:active { transform: scale(.94); }
.cpf-vc-host .cpf-vc__mute svg { display: block; width: 22px; height: 22px; }
.cpf-vc-host button.cpf-vc__mute:focus-visible { outline: 3px solid #a77bff; outline-offset: 2px; }
.cpf-vc-host.is-idle button.cpf-vc__mute { opacity: 0; pointer-events: none; }
.cpf-vc-host button.cpf-vc__btn:focus-visible, .cpf-vc-host .cpf-vc__seek:focus-visible { outline: 3px solid #a77bff; outline-offset: 2px; }
.cpf-vc-host .cpf-vc__seek { flex: 1; display: flex; align-items: center; height: 44px; cursor: pointer; touch-action: none; border-radius: 10px; }
.cpf-vc-host .cpf-vc__track { position: relative; flex: 1; height: 4px; border-radius: 10px; background: rgba(255, 255, 255, .28); transition: height .15s; }
.cpf-vc-host .cpf-vc__seek:hover .cpf-vc__track, .cpf-vc-host.is-scrubbing .cpf-vc__track { height: 6px; }
.cpf-vc-host .cpf-vc__buf, .cpf-vc-host .cpf-vc__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: inherit; }
.cpf-vc-host .cpf-vc__buf { background: rgba(255, 255, 255, .26); }
.cpf-vc-host .cpf-vc__fill { background: #fff; }
.cpf-vc-host .cpf-vc__knob { position: absolute; top: 50%; left: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); transform: scale(0); transition: transform .15s; }
.cpf-vc-host .cpf-vc__seek:hover .cpf-vc__knob, .cpf-vc-host.is-scrubbing .cpf-vc__knob, .cpf-vc-host .cpf-vc__seek:focus-visible .cpf-vc__knob { transform: scale(1); }
@media (pointer: coarse) { .cpf-vc-host .cpf-vc__knob { transform: scale(1); } }
/* the sound, on and off, in the film's top-right corner (a dark glass circle, so it reads on the film's pale frames),
   fading with the bar; in place it sits beside the frame's own × */
  margin: 0; padding: 0; border: 0; border-radius: 50%; background: rgba(22, 22, 22, .5); color: #fff; cursor: pointer;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: opacity .35s ease, background .2s, transform .2s; }
.cpf-vc-host.is-full { border: 0; border-radius: 0; background: #000; }
.cpf-vc-host.is-full video { object-fit: contain; border-radius: 0; background: #000; }

@media (prefers-reduced-motion: reduce) {
  .cpp-pop { transition: opacity .2s ease; transform: none; }
  .cpp-pop a.cpp-pop__go { transition: none; }
  .cpp-pop .cpp-pop__play .cpp-pop__pl { animation: none; transition: none; }
}

/* ── the banner (2026-11-08) ───────────────────────────────────────────────────────────────── */
/* The Handyman.ai banner's place and shape (.hmp-bar, removed in 5dec8e9): a slim ink strip above the header on
   every page, the whole strip a link to /clickpad, with Clickpad's violet where Handyman's lime was. */
.cpb-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; }
.cpb-bar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none;
  background: #6a00f8; opacity: .7; }
.cpb-bar .cpb-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; }
.cpb-bar .cpb-bar__new { flex: none; padding: 4px 9px 3px; border-radius: 999px; background: #6a00f8; color: #fff;
  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; }
.cpb-bar .cpb-bar__ic { flex: none; display: block; width: 28px !important; height: 28px !important; max-width: none !important; }
.cpb-bar .cpb-bar__t { min-width: 0; margin: 0; padding: 0; font-size: 14px; line-height: 1.3; color: rgba(250, 247, 246, .82); }
.cpb-bar .cpb-bar__t b { font-family: "Funnel Display", ui-sans-serif, system-ui, sans-serif; font-weight: 700; color: #fff; }
.cpb-bar .cpb-bar__short { display: none; }
.cpb-bar a.cpb-bar__go { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px 7px 15px; border-radius: 999px;
  background: #6a00f8; color: #fff; font-size: 13.5px; font-weight: 700; line-height: 1; text-decoration: none; white-space: nowrap;
  transition: transform .15s ease, background .15s ease; }
.cpb-bar a.cpb-bar__go:hover { color: #fff; background: #7d1fff; transform: translateY(-1px); }
.cpb-bar a.cpb-bar__go svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cpb-bar a:focus-visible { outline: 2px solid #b48cff; outline-offset: 3px; }
/* the whole strip opens /clickpad: a link under everything; the words let taps through to it */
.cpb-bar .cpb-bar__hit { position: absolute; inset: 0; z-index: 1; }
.cpb-bar .cpb-bar__hit:focus-visible { outline: 2px solid #b48cff; outline-offset: -3px; }
.cpb-bar .cpb-bar__in a { pointer-events: auto; }
@media (max-width: 760px) {
  .cpb-bar .cpb-bar__in { gap: 9px; padding: 7px 12px; }
  .cpb-bar .cpb-bar__long { display: none; }
  .cpb-bar .cpb-bar__short { display: inline; }
  .cpb-bar .cpb-bar__t { font-size: 13px; }
  .cpb-bar a.cpb-bar__go { padding: 7px 12px; font-size: 13px; }
}
@media (max-width: 400px) { .cpb-bar .cpb-bar__new { display: none; } }