/* ============================================================================
 * wereno-handyman.css — /handyman only. Everything here is scoped under .hm
 * and prefixed hm-. It sits ON TOP of wereno-products.css, which owns the
 * shared furniture (.wr-inner .wr-card .wr-btn .wr-link .wr-pill .wr-chip
 * .wr-band .wr-field .wr-eyebrow .wr-hand .wr-ex .wr-ex-badge .wr-mark
 * .wr-split .wr-cases .wr-case .wr-sec--hero .wr-sec--tight) — none of which
 * is redefined here.
 *
 * Handyman's identity, and the reason none of it is Renobot with the nouns
 * swapped:
 *   - SPEECH BUBBLES, radius 18 with a hard triangular tail, 0 4px 0 0.
 *   - OBJECT CARDS, radius 18, sentence-case 18px labels. Never a table.
 *   - Nanum Pen Script (.wr-hand) for captions and callouts. Renobot never.
 *   - No uppercase micro-labels anywhere. The shared recreation badge is the
 *     one exception, and it belongs to the honesty contract, not to Handyman.
 *   - No question chips. Those are Renobot's, outright.
 *   - STATUS IS A SENTENCE, not a badge word: "A trade is chosen — no time set
 *     yet", "Parts not established — we need the make", "Read off a document on
 *     file." That is the product's own convention and it is the single most
 *     distinctive thing about it, so it survives the rebuild intact.
 *   - EVERY FIGURE WEARS ITS SOURCE (.hm-prov__c). In the app the provenance
 *     caption is a permanent slot under the value, which is why an unsourced
 *     number has nowhere to sit. Rendered in --hm-deep rather than the primary:
 *     #FF003F on white measures 3.94:1 and the caption is 14px, so it is short of
 *     AA. --hm-deep #B3002C manages 7.11:1. (Under sage the same rule held for the
 *     same reason at 2.30:1; the hue moved, the conclusion did not.)
 *   - Two dark bands: the portfolio view and the CTA. Three ornaments.
 * ========================================================================== */

/* Two signal colours carried over from the app, where each means exactly one
   thing and is never used decoratively:
     --hm-need  amber, "this is blocked on you" — a border or a dot, never type
     --hm-need-ink  the readable amber for type (the #A66A00 eyebrow amber
                    measures 4.48:1 on white, a hair under AA for 14px)
     --hm-over  overdue, and in the app the Emergency item. Nothing else. */
.hm{--hm-need:#FDC313;--hm-need-ink:#8A5200;--hm-over:#A33B2C;--hm-over-bg:#F6E2DE}

/* ======================================================== shared pieces === */

/* ---- the recreation badge ----------------------------------------------- */
/* The relaunch badge carries two strings ("From the product · Names changed").
   Absolutely positioned, at 390px it wrapped across the first line of whatever
   frame it sat in. It is still the first thing inside the frame — which is the
   honesty contract's actual requirement, since a caption underneath does not
   survive a screenshot crop — but it now occupies its own row instead of
   floating over the content. */
.hm .hm-badge{position:static;display:block;width:max-content;max-width:100%;
  margin:0 0 14px auto;text-align:right;line-height:1.35}

/* ---- the bubble ---------------------------------------------------------- */
/* Radius 18 with a square corner on the tail side, plus a genuine hard tail
   built from two clipped triangles: the outer one is the border colour and
   runs 4px past the border box so it merges with the 0 4px 0 0 shadow; the
   inner one is the fill. No curves, no blur — the theme has neither. */
/* WHO IS ON WHICH SIDE. A reader holds the phone, so what THEY send sits on the
   right and what comes back sits on the left — the convention every messaging app
   uses. The classes say who is speaking rather than in/out, because the previous
   pair meant the opposite of what it looked like and read as WeReno interrogating
   the visitor. --you is the person reading the page; --them is the product, or
   WeReno answering in the FAQ. */
.hm .hm-row{display:flex;align-items:flex-end;margin:0 0 11px}
.hm .hm-row:last-child{margin-bottom:0}
.hm .hm-row--you{justify-content:flex-end}
.hm .hm-row--them{justify-content:flex-start;position:relative;padding-left:54px}

.hm .hm-bub{
  position:relative;max-width:82%;
  font-family:"Outfit",sans-serif;font-size:17px;line-height:1.6;font-weight:400;
  color:var(--wr-ink);background:#fff;
  border:3px solid var(--wr-line);border-radius:18px;padding:12px 16px;
  box-shadow:var(--wr-shadow-sm)}
/* The reader's message is blue and the reply comes back white — which is what the
   real threads in the screenshots look like, and what every phone does. Sage stays
   Handyman's colour everywhere else on the page; inside a transcript, documentary
   accuracy is worth more than a brand hit. */
.hm .hm-bub--you{background:var(--wr-blue);color:#fff;border-bottom-right-radius:3px}
/* A short link inside a reply, set the way a link looks in a real thread: the
   iMessage blue this site already uses for outgoing bubbles, underlined. It is
   a <span>, never an <a>. These .ai domains do not route here and the site bans
   a navigable reference to them, so the link is a picture of a link. Not
   clickable, so no pointer cursor to promise otherwise. */
.hm .hm-lnk{
  color:#0B69D4;text-decoration:underline;text-underline-offset:2px;
  text-decoration-thickness:1px;word-break:break-word}
/* On the blue outgoing bubble the same blue would vanish, so it inverts the way
   iMessage does. Present for completeness: today every link is in a reply. */
.hm .hm-bub--you .hm-lnk{color:#fff;text-decoration-color:rgba(255,255,255,.75)}

.hm .hm-bub--them{border-bottom-left-radius:3px}
.hm .hm-bub--ans{border-bottom-left-radius:3px}

.hm .hm-bub::before,.hm .hm-bub::after{content:"";position:absolute;display:block}
/* outer (border-colour) triangle */
.hm .hm-bub::before{width:15px;height:22px;bottom:-7px;background:var(--wr-line)}
/* inner (fill) triangle */
.hm .hm-bub::after{width:11px;height:11px;bottom:0}

/* the visitor's tail points down-right; the product's down-left */
.hm .hm-bub--you::before{right:-18px;clip-path:polygon(0 0,100% 100%,0 100%)}
.hm .hm-bub--you::after{right:-11px;clip-path:polygon(0 0,100% 100%,0 100%);background:var(--wr-blue)}
.hm .hm-bub--them::before,.hm .hm-bub--ans::before{left:-18px;clip-path:polygon(100% 0,100% 100%,0 100%)}
.hm .hm-bub--them::after{left:-11px;clip-path:polygon(100% 0,100% 100%,0 100%);background:#fff}
.hm .hm-bub--ans::after{left:-11px;clip-path:polygon(100% 0,100% 100%,0 100%);background:#fff}

/* the one bubble on the page the product sent without being asked */
.hm .hm-bub--flag{border-color:var(--hm-deep);box-shadow:0 4px 0 0 var(--hm-deep)}
.hm .hm-bub--flag::before{background:var(--hm-deep)}

/* the oversized vague message in the Homebook section */
.hm .hm-bub__xl{display:block;font-size:28px;line-height:1.35;font-weight:500;
  letter-spacing:-.018em;color:var(--wr-ink)}
/* the refusal, set as the headline it is */
.hm .hm-bub__lg{display:block;font-size:22px;line-height:1.45;font-weight:500;
  letter-spacing:-.015em;color:var(--wr-ink)}

/* a redacted entity inside an otherwise verbatim transcript */
/* the ink stays ink: --hm-deep type on a --hm-light bubble measures 3.99:1 */
.hm .hm-red{border-bottom:2px dotted var(--hm-deep);color:var(--wr-ink)}
/* ...but a redaction inside the reader's own blue bubble has to invert, or it is
   ink on #0B69D4 at 3.5:1. Same for a URL. */
.hm .hm-bub--you .hm-red{color:#fff;border-bottom-color:rgba(255,255,255,.75)}
.hm .hm-bub--you .hm-url{border-bottom-color:rgba(255,255,255,.75)}
/* a URL the product actually sent. Deliberately not an <a>: nothing inside a
   recreation frame is a live control. */
.hm .hm-url{border-bottom:2px solid var(--hm-deep);word-break:break-word}

/* the robot, at conversational scale — the character you text */
.hm .hm-face{position:absolute;left:0;bottom:0;width:30px;height:30px;
  border-radius:50%;background:var(--hm-field);
  border:2px solid var(--wr-line);object-fit:cover}
.hm .hm-face--head{position:static;width:34px;height:34px;flex:0 0 34px}

/* WeReno answering in its own voice in the FAQ — deliberately NOT the robot */
.hm .hm-wr{position:absolute;left:0;bottom:0;width:30px;height:30px;
  display:flex;align-items:center;justify-content:center;
  background:var(--wr-dark);border:2px solid var(--wr-line);border-radius:8px;
  font-family:"Outfit",sans-serif;font-size:11px;font-weight:600;letter-spacing:.04em;
  color:var(--wr-cream)}

/* photo placeholder — hatched, never a stock photo of a boiler */
.hm .hm-photo__t{font-family:"Outfit",sans-serif;font-size:13px;font-weight:500;
  color:rgba(20,20,20,.62);background:rgba(255,255,255,.86);
  border-radius:4px;padding:2px 8px}

/* timestamps — sentence case, never the 11px uppercase command register */
.hm .hm-stamp{font-family:"Outfit",sans-serif;font-size:14px;font-weight:400;
  line-height:1.4;color:var(--wr-body);text-align:center;margin:0 0 14px}
.hm .hm-thread .hm-stamp:not(:first-child){margin-top:22px}

/* ---- panels and object cards -------------------------------------------- */
.hm .hm-panel{position:relative;background:#fff;border:3px solid var(--wr-line);
  border-radius:18px;box-shadow:var(--wr-shadow);padding:24px}
/* the one-line explanation every screen in the app opens with */
.hm .hm-panel__h{font-family:"Outfit",sans-serif;font-size:16px;font-weight:500;
  line-height:1.5;color:var(--wr-ink);margin:0 0 18px;padding-bottom:14px;
  border-bottom:3px solid var(--wr-line)}

.hm .hm-obj{background:#fff;border:3px solid var(--wr-line);border-radius:18px;
  box-shadow:var(--wr-shadow);padding:22px 24px 8px}
.hm .hm-obj__head{font-family:"Outfit",sans-serif;font-size:18px;font-weight:500;
  line-height:1.4;letter-spacing:-.012em;color:var(--wr-ink);
  padding:0 0 14px;margin:0 0 4px;border-bottom:3px solid var(--wr-line)}
.hm .hm-objsub{font-family:"Outfit",sans-serif;font-size:16px;line-height:1.5;
  color:var(--wr-body);margin:14px 0 4px}
.hm .hm-obj__row{position:relative;padding:13px 0;
  border-bottom:1px solid rgba(20,20,20,.1)}
.hm .hm-obj__row:last-child{border-bottom:0}
.hm .hm-obj__l{display:block;font-family:"Outfit",sans-serif;font-size:18px;
  font-weight:500;line-height:1.4;letter-spacing:-.012em;color:var(--wr-ink)}
.hm .hm-obj__v{display:block;font-family:"Outfit",sans-serif;font-size:17px;
  line-height:1.55;color:var(--wr-body);margin-top:2px}

/* card-foot actions: icon-less text pairs, no button chrome — the app's own
   treatment. Spans, not links: nothing in a fence is live. */
.hm .hm-acts{display:flex;flex-wrap:wrap;gap:8px 20px;margin:16px 0 0;
  padding-top:14px;border-top:1px solid rgba(20,20,20,.16)}
.hm .hm-act{font-family:"Outfit",sans-serif;font-size:15px;line-height:1.4;
  color:var(--wr-body)}
.hm .hm-act::before{content:"";display:inline-block;width:7px;height:7px;
  margin-right:8px;vertical-align:middle;background:var(--hm-red)}

/* ---- tag (sentence case, radius 18 — not a Renobot chip) ---------------- */
.hm .hm-tag{display:inline-block;font-family:"Outfit",sans-serif;font-size:14px;
  font-weight:500;line-height:1.5;color:var(--wr-ink);background:var(--hm-light);
  border:3px solid var(--wr-line);border-radius:18px;padding:5px 14px;
  box-shadow:var(--wr-shadow-sm)}

/* ---- small type helpers ------------------------------------------------- */
.hm .hm-intro{max-width:70ch}
.hm .hm-cap{display:block;margin-top:20px;color:var(--hm-deep)}
.hm .hm-cap--top{margin:0 0 28px}
.hm .hm-cap16{font-family:"Outfit",sans-serif;font-size:16px;line-height:1.7;
  color:var(--wr-body);margin:24px 0 0}
.hm .hm-note{font-family:"Outfit",sans-serif;font-size:15px;line-height:1.6;
  color:var(--wr-body);margin:14px 0 0}
.hm .hm-mini{font-family:"Outfit",sans-serif;font-size:16px;font-weight:500;
  line-height:1.5;color:var(--wr-ink);margin:0 0 14px}
.hm .hm-lead{font-family:"Outfit",sans-serif;font-size:24px;font-weight:500;
  line-height:1.4;letter-spacing:-.02em;color:var(--wr-ink);margin:0 0 14px}
.hm .hm-list{list-style:none;margin:0;padding:0}
.hm .hm-list li{position:relative;font-size:18px;line-height:1.8;
  color:var(--wr-body);padding-left:22px}
.hm .hm-list li::before{content:"";position:absolute;left:0;top:13px;
  width:10px;height:10px;background:var(--hm-red)}
.hm .hm-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* a sentence lifted out of a product screen, quoted rather than rebuilt — no
   frame and no badge, because plain quoted type cannot be mistaken for the app */
.hm .hm-pull{margin-top:28px;padding-left:22px;border-left:3px solid var(--hm-red)}
.hm .hm-pull p{font-size:19px;line-height:1.65;color:var(--wr-ink);margin:0}
.hm .hm-pull__src{font-size:15px;line-height:1.5;color:var(--wr-body);margin-top:8px}
.hm .hm-pull .hm-pull__src{font-size:15px;color:var(--wr-body)}

/* ---- ornaments — three, black, from the about-us family ----------------- */
.hm .hm-orn{position:absolute;display:block;height:auto;pointer-events:none;
  user-select:none}
.hm .hm-orn--a{right:0;top:-16px;width:94px}
.hm .hm-orn--b{left:0;bottom:-70px;width:120px}
.hm .hm-orn--c{left:0;top:96px;width:118px}

/* ============================================================ §1 HERO ===== */
/* The hero used to clip, which cut the bottom off the arrow ornament that
   deliberately hangs 70px past the section edge. Clipping sideways is what
   that rule was actually for, so clip-x only and let the arrow through.
   It also needs a stacking context above the sections below, or it paints
   behind whichever one comes next. */
.hm .hm-hero{overflow-x:clip;overflow-y:visible;position:relative;z-index:2}
.hm .hm-orn--b{z-index:3}
.hm .hm-hero__grid{position:relative;display:grid;grid-template-columns:1fr 1fr;
  gap:48px;align-items:center}
.hm .hm-hero__copy .wr-pill{margin:0 0 18px}
.hm .hm-hero__copy .wr-eyebrow{margin-bottom:10px}
.hm .hm-sub{max-width:54ch;margin-bottom:32px}
.hm .hm-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}

/* --- the hero phone is a handset ---------------------------------------
   Frame, island, status bar, iMessage header and input bar, so the thing
   reading as a phone does not depend on the reader taking the card's word
   for it. The screen is the scroll window; the thread inside it is bottom
   anchored the way a real conversation is, so the first message arrives at
   the bottom of an empty screen rather than at the top of a tall gap.     */
.hm .hm-phone{width:min(330px,90%);margin:0 auto;
  background:#1b1b1d;border-radius:46px;padding:11px;
  box-shadow:0 10px 0 0 rgba(0,0,0,.9),0 0 0 3px var(--wr-line),
             inset 0 0 0 2px rgba(255,255,255,.13)}
.hm .hm-phone__screen{position:relative;background:#fff;border-radius:36px;
  overflow:hidden;display:flex;flex-direction:column}

.hm .hm-phone__island{position:absolute;top:9px;left:50%;transform:translateX(-50%);
  width:80px;height:23px;border-radius:999px;background:#1b1b1d;z-index:3}

.hm .hm-phone__status{display:flex;align-items:center;justify-content:space-between;
  padding:12px 22px 4px;font-family:"Outfit",sans-serif;font-size:13px;
  font-weight:600;color:var(--wr-ink);letter-spacing:.01em}
.hm .hm-phone__time{padding-left:4px}
.hm .hm-phone__icons{display:flex;align-items:center;gap:5px;color:var(--wr-ink)}
.hm .hm-phone__icons svg{display:block}

/* iMessage puts the contact above the name, centred, with the back chevron
   floated out to the left — which is the layout people recognise. */
.hm .hm-phone__head{position:relative;display:flex;flex-direction:column;
  align-items:center;gap:5px;padding:10px 0 9px;
  border-bottom:1px solid rgba(20,20,20,.13);background:#fafafa}
.hm .hm-phone__back{position:absolute;left:14px;top:50%;transform:translateY(-50%);
  color:var(--hm-deep);display:flex}
.hm .hm-phone__id{display:flex;flex-direction:column;align-items:center;gap:4px}

/* The robot overflows its disc rather than being cropped into it: the hat and
   the raised arm are most of the character, and a circular crop eats both. */
.hm .hm-avatar{position:relative;display:block;width:46px;height:46px;
  border-radius:50%;background:var(--hm-field);
  box-shadow:inset 0 0 0 2px rgba(20,20,20,.16)}
.hm .hm-avatar img{position:absolute;left:50%;bottom:-3px;transform:translateX(-50%);
  width:66px;height:66px;max-width:none;object-fit:contain;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.18))}
.hm .hm-phone__who{display:flex;align-items:center;gap:4px;
  font-family:"Outfit",sans-serif;font-size:13.5px;font-weight:500;
  letter-spacing:-.01em;color:var(--wr-ink)}
.hm .hm-phone__chev{color:rgba(20,20,20,.4)}

.hm .hm-phone .hm-bub{font-size:14px;line-height:1.5;padding:9px 12px;max-width:87%}
.hm .hm-phone .hm-stamp{font-size:11.5px;margin:0 0 10px;text-align:center}
.hm .hm-phone .hm-row--them{padding-left:0}
.hm .hm-phone .hm-face{width:22px;height:22px}

/* The input bar and the home indicator are what stop the screen reading as a
   cropped card: a phone is closed at the bottom, not trailing off. */
.hm .hm-phone__bar{display:flex;align-items:center;gap:8px;
  padding:9px 12px 6px;border-top:1px solid rgba(20,20,20,.13);
  background:#fafafa}
.hm .hm-phone__plus{flex:0 0 auto;width:25px;height:25px;border-radius:50%;
  background:rgba(20,20,20,.08);color:var(--wr-body);display:flex;
  align-items:center;justify-content:center;font-size:17px;line-height:1;
  font-family:"Outfit",sans-serif}
.hm .hm-phone__field{flex:1 1 auto;min-width:0;padding:5px 12px;
  border:1px solid rgba(20,20,20,.22);border-radius:999px;
  font-family:"Outfit",sans-serif;font-size:13.5px;color:rgba(20,20,20,.4)}
.hm .hm-phone__send{flex:0 0 auto;width:25px;height:25px;border-radius:50%;
  background:var(--wr-blue);color:#fff;display:flex;align-items:center;
  justify-content:center}
.hm .hm-phone__home{display:block;width:108px;height:4px;border-radius:999px;
  background:rgba(20,20,20,.75);margin:6px auto 8px}

/* --- the thread window -------------------------------------------------
   Fixed height, bottom anchored, and deliberately unmasked: a fade at the
   top reads as a rendering fault on a short thread, and it hides the very
   message that just scrolled away.                                        */
.hm .hm-phone--live .hm-thread{
  /* 47vh, not 44. Every scene now carries a delivery receipt and a tapback
     that it did not when this number was set, which is about 22px of thread
     per scene. Rather than shave another line off eight conversations to fit
     a box that was sized before they grew, the box gets the height back. */
  height:clamp(350px,47vh,450px);
  display:flex;flex-direction:column;
  /* right padding has to clear the you-bubble's 18px tail, or the tail is
     sliced flat against the screen edge */
  padding:14px 22px 10px 22px;
  overflow-y:hidden;overscroll-behavior:contain;scroll-behavior:smooth}
/* A growing, shrinking spacer is what bottom-anchors the thread. The obvious
   `justify-content:flex-end` does it too, right up until the content is taller
   than the box — then it overflows past the scroller's start edge, where it is
   both unreachable and invisible to scrollHeight. */
.hm .hm-phone--live .hm-thread__push{flex:1 1 0;min-height:0}
.hm .hm-phone--live .hm-thread::-webkit-scrollbar{width:0}
.hm .hm-phone--live.hm-phone--done .hm-thread{overflow-y:auto}

.hm .hm-phone--armed .hm-row,
.hm .hm-phone--armed .hm-stamp{opacity:0}
.hm .hm-phone--playing .hm-row:not(.hm-row--in),
.hm .hm-phone--playing .hm-stamp:not(.hm-row--in){
  opacity:0;height:0;margin:0;overflow:hidden}
.hm .hm-phone--playing .hm-row--in{
  animation:hm-pop .34s cubic-bezier(.22,1.2,.36,1) both}
@keyframes hm-pop{from{opacity:0;transform:translateY(12px) scale(.94)}
                  to{opacity:1;transform:none}}

.hm .hm-typing .hm-bub{display:flex;gap:4px;align-items:center;padding:12px 13px}
.hm .hm-typing i{width:6px;height:6px;border-radius:50%;background:var(--wr-body);
  display:block;opacity:.4;animation:hm-dot 1.1s ease-in-out infinite}
.hm .hm-typing i:nth-child(2){animation-delay:.16s}
.hm .hm-typing i:nth-child(3){animation-delay:.32s}
@keyframes hm-dot{0%,60%,100%{opacity:.28;transform:translateY(0)}
                  30%{opacity:.9;transform:translateY(-3px)}}

@media(prefers-reduced-motion:reduce){
  .hm .hm-phone--live .hm-thread{scroll-behavior:auto;overflow-y:auto}
  .hm .hm-phone--armed .hm-row,.hm .hm-phone--armed .hm-stamp,
  .hm .hm-phone--playing .hm-row,.hm .hm-phone--playing .hm-stamp{
    opacity:1;height:auto;margin:revert;animation:none}
  .hm .hm-typing i{animation:none}
}

/* The line under the phone was loose body copy floating on the page ground,
   which read as an afterthought next to the handset above it. Boxed, and held
   to the phone's own width so the two read as one object. */
.hm .hm-phone-note{
  width:min(330px,86%);margin:16px auto 0;
  background:#fff;border:3px solid var(--wr-line);border-radius:14px;
  box-shadow:0 4px 0 0 rgba(0,0,0,.9);
  padding:13px 16px;
  font-size:14.5px;line-height:1.55;color:var(--wr-body);text-align:center}
/* the phone drops to 320 at 1024, so the note has to follow it there and not
   at 767, or the box sits wider than the handset it belongs to */
@media(max-width:1024px){
  .hm .hm-phone-note{width:min(320px,100%)}
}
@media(max-width:767px){
  .hm .hm-phone-note{font-size:13.5px;padding:11px 14px}
}

/* --- the demo: scene cross-fade, dots, rotating caption ----------------
   The frame never moves. Only the thread's contents change, so the fade is
   on .hm-thread and everything around it stays put. */
.hm .hm-thread{transition:opacity .26s ease}
.hm .hm-thread.is-out{opacity:0}

.hm .hm-demo__dots{display:flex;justify-content:center;align-items:center;
  gap:9px;margin:18px 0 0}
.hm .hm-demo__dot{appearance:none;-webkit-appearance:none;padding:0;
  width:8px;height:8px;border-radius:50%;cursor:pointer;
  background:transparent;border:2px solid var(--wr-line);opacity:.42;
  transition:opacity .2s ease,background-color .2s ease,transform .2s ease}
.hm .hm-demo__dot:hover{opacity:.75}
.hm .hm-demo__dot.is-on{background:var(--hm-red);opacity:1;transform:scale(1.25)}
.hm .hm-demo__dot:focus-visible{outline:2px solid var(--wr-ink);outline-offset:3px}

/* ---- the hold control -----------------------------------------------------
 * Sits immediately to the right of the dots, and the pair is centred as a group
 * under the phone.
 *
 * The ring does two jobs and they must never be mistaken for each other, so
 * they differ in BOTH colour and direction:
 *   green, filling      a scene is playing, and this is how far through it is
 *   amber, draining     paused, five seconds left on the clock
 *   red, draining       stopped, thirty seconds
 * The direction flip is a scaleX(-1) on the svg rather than a second animation.
 *
 * The three status colours are deliberately NOT the product colour. A ring that
 * is orange on Opsonic and red on Handyman would be saying the brand, not the
 * state, and the state is the only thing this control exists to report.
 */
.hm .hm-demo__bar{display:flex;justify-content:center;align-items:center;
  gap:14px;margin:18px 0 0}
.hm .hm-demo__bar .hm-demo__dots{margin:0}
.hm .hm-demo__ctl{
  position:relative;flex:0 0 auto;
  appearance:none;-webkit-appearance:none;padding:0;
  width:26px;height:26px;border-radius:50%;cursor:pointer;
  background:transparent;border:0;color:var(--wr-ink);
  display:flex;align-items:center;justify-content:center;
  opacity:.72;transition:opacity .2s ease}
.hm .hm-demo__ctl:hover,.hm .hm-demo__ctl.is-held{opacity:1}
.hm .hm-demo__ctl:focus-visible{outline:2px solid var(--wr-ink);outline-offset:2px}
.hm .hm-demo__ic{position:relative;width:11px;height:11px;fill:currentColor}

.hm .hm-demo__ring{position:absolute;inset:0;width:100%;height:100%;
  transform:rotate(-90deg);pointer-events:none}
/* Playing runs CLOCKWISE, which is how a progress ring is read, and the two
   holds run the other way so a countdown never looks like progress. */
.hm .hm-demo__ctl[data-state="short"] .hm-demo__ring,
.hm .hm-demo__ctl[data-state="long"] .hm-demo__ring{transform:rotate(-90deg) scaleX(-1)}
.hm .hm-demo__ring circle{fill:none;stroke-width:2.5}
.hm .hm-demo__ring-t{stroke:var(--wr-line);opacity:.18}
.hm .hm-demo__ring-p{stroke-linecap:round}
.hm .hm-demo__ctl[data-state="playing"] .hm-demo__ring-p{stroke:#3E9B34}
.hm .hm-demo__ctl[data-state="short"]   .hm-demo__ring-p{stroke:#F08C00}
.hm .hm-demo__ctl[data-state="long"]    .hm-demo__ring-p{stroke:#D6293E}

/* The dots are hidden under reduced motion, not at a width, so the control
   follows the same rule. In practice the script returns before either is built
   in that mode; this is here so the two can never disagree. */
@media(prefers-reduced-motion:reduce){ .hm .hm-demo__ctl{display:none} }


.hm .hm-hero__art .hm-cap{transition:opacity .18s ease;min-height:1.5em}
.hm .hm-hero__art .hm-cap.is-out{opacity:0}

/* The demo badge is not a provenance badge, so it deliberately does NOT use
   the boxed, hard-shadowed stamp the "From the product" chips wear. A soft
   pill in the product's own green, with a slow pulse on the dot to say the
   thing above it is running. */
.hm .hm-badge--demo{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--hm-field,#FFE8ED);
  border:1px solid rgba(73,101,72,.28);
  border-radius:999px;box-shadow:none;
  padding:5px 13px 5px 11px;
  font-size:10.5px;font-weight:600;letter-spacing:.1em;
  color:var(--hm-deep);text-transform:uppercase}
.hm .hm-badge--demo::before{
  content:"";flex:0 0 auto;width:6px;height:6px;border-radius:50%;
  background:var(--hm-red);
  box-shadow:0 0 0 0 rgba(146,182,99,.75);
  animation:hm-pulse 2.4s ease-out infinite}
@keyframes hm-pulse{
  0%{box-shadow:0 0 0 0 rgba(146,182,99,.7)}
  70%{box-shadow:0 0 0 6px rgba(146,182,99,0)}
  100%{box-shadow:0 0 0 0 rgba(146,182,99,0)}}
@media(prefers-reduced-motion:reduce){
  .hm .hm-badge--demo::before{animation:none}}

@media(prefers-reduced-motion:reduce){
  .hm .hm-thread,.hm .hm-hero__art .hm-cap{transition:none}
  .hm .hm-demo__dots{display:none}
}

/* the badge sits above the handset now — a sticker on the frame would fight
   the illusion the frame is doing all the work to build */
/* Inside the fence — a crop of the recreation has to carry its own badge —
   but lifted clear of the handset, since a sticker on the frame would fight
   the illusion the frame is working to build. */
.hm .hm-badge--above{position:absolute;top:auto;right:auto;left:50%;
  bottom:calc(100% + 14px);transform:translateX(-50%);margin:0;
  text-align:center;white-space:nowrap}

.hm .hm-hero__art .hm-cap{text-align:center}

/* =================================================== §1b TWO GUARANTEES === */
.hm .hm-guards .hm-intro{margin-bottom:44px}
.hm .hm-guards__grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;
  align-items:start}
.hm .hm-guard h3{margin-bottom:20px}
.hm .hm-guard .hm-panel{margin-bottom:24px}

/* the message box, reproduced. The input is disabled — the explanation of why
   is its placeholder, which is the honesty contract's rule for a dead control. */
.hm .hm-comp{background:var(--hm-field);border:3px solid var(--wr-line);
  border-radius:18px;padding:16px 16px 14px}
.hm .hm-comp__in{display:block;width:100%;box-sizing:border-box;
  font-family:"Outfit",sans-serif;font-size:17px;line-height:1.5;
  color:var(--wr-ink);background:#fff;border:2px solid var(--wr-line);
  border-radius:12px;padding:12px 14px}
.hm .hm-comp__in::placeholder{color:rgba(20,20,20,.62)}
.hm .hm-comp__in:disabled{opacity:1;-webkit-text-fill-color:rgba(20,20,20,.62)}
.hm .hm-comp__row{display:flex;align-items:center;gap:12px;margin-top:12px}
.hm .hm-comp__chip{font-family:"Outfit",sans-serif;font-size:14px;font-weight:500;
  line-height:1;color:var(--wr-ink);background:#fff;border:2px solid var(--wr-line);
  border-radius:999px;padding:7px 13px}
.hm .hm-comp__send{margin-left:auto;width:32px;height:32px;border-radius:50%;
  background:var(--hm-red);border:2px solid var(--wr-line);
  display:flex;align-items:center;justify-content:center;
  font-size:15px;line-height:1;color:var(--wr-ink)}
.hm .hm-comp__note{font-family:"Outfit",sans-serif;font-size:15px;line-height:1.5;
  color:var(--wr-ink);margin:14px 0 0;padding-top:12px;
  border-top:1px solid rgba(20,20,20,.18)}

/* ========================================================= §2 BRIDGE ===== */
/* The bridge is the one place both products stand next to each other, so it
   is built as a comparison and not as a paragraph: a shared statement across
   the top, then a column each, then the caveat that covers both. The two
   columns carry their own brand tint in the cap only — tinting the whole
   column would make the card read as two cards that happen to touch. */
.hm .hm-bridge__box{background:#fff;border:3px solid var(--wr-line);
  border-radius:18px;box-shadow:var(--wr-shadow);overflow:hidden}

.hm .hm-bridge__bottom{text-align:center;padding:30px 32px 28px;
  border-top:3px solid var(--wr-line)}
.hm .hm-bridge__box .wr-pill{margin:6px 0 18px}
.hm .hm-bridge__shared{max-width:64ch;margin:0 auto}

.hm .hm-bridge__cols{display:grid;grid-template-columns:1fr 1fr}
.hm .hm-bridge__col{min-width:0;padding:26px 30px 30px;display:flex;
  flex-direction:column;align-items:flex-start;gap:14px}
.hm .hm-bridge__col--rb{border-right:3px solid var(--wr-line)}

/* The two caps butt together across the card to form one coloured header
   row, and the column rule between them is the divider. Each half bleeds to
   its column's edges via the negative margin, so the colour meets the card
   border with no gap. */
.hm .hm-bridge__cap{width:calc(100% + 60px);margin:-26px -30px 20px;
  padding:17px 26px 15px;display:flex;flex-direction:column;
  align-items:flex-start;gap:8px;
  border-bottom:3px solid var(--wr-line)}
/* These two caps name SPECIFIC products, so they carry those products' colours
   as literals rather than the page's tokens. Using var(--hm-red) meant that on
   Renobot's page, where .rbc redefines that token, the Handyman column rendered
   in Renobot's blue: the band said Handyman and looked like Renobot. */
.hm .hm-bridge__col--rb .hm-bridge__cap{background:#35C4F0}   /* Renobot */
.hm .hm-bridge__col--hm .hm-bridge__cap{background:#FF003F}   /* Handyman */

.hm .hm-bridge__head{display:flex;align-items:center;
  gap:clamp(9px,1vw,14px);min-width:0;max-width:100%}
.hm .hm-bridge__line{font-family:"Outfit",sans-serif;
  font-size:clamp(16px,1.5vw,24px);font-weight:600;line-height:1.15;
  letter-spacing:-.022em;color:var(--wr-ink);white-space:nowrap}
/* scoped, or .elementor img{height:auto} wins and it renders at 640px */
.hm .hm-bridge__bot{display:block;flex:0 0 auto;width:auto;
  height:clamp(40px,3.9vw,64px);
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}

/* on full-strength amber and green the label needs ink, not body grey */
.hm .hm-bridge__verb{font-family:"Outfit",sans-serif;font-size:11px;
  font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--wr-ink);opacity:.72}
.hm .hm-bridge__d{margin:0;flex:1 1 auto}

/* The figure sits over its own caption, which is the rule the rest of the
   page follows: a number never appears without the thing it counts. */
.hm .hm-bridge__stat{margin:0;padding-top:14px;width:100%;
  border-top:1px solid rgba(20,20,20,.14)}
.hm .hm-bridge__stat b{display:block;font-family:"Outfit",sans-serif;
  font-size:34px;font-weight:600;line-height:1.05;letter-spacing:-.02em;
  color:var(--wr-ink)}
.hm .hm-bridge__stat span{display:block;font-size:14px;line-height:1.5;
  color:var(--wr-body);margin-top:3px}

.hm .hm-bridge__here{font-family:"Outfit",sans-serif;font-size:13px;
  font-weight:500;color:var(--wr-body);padding:6px 13px;border-radius:999px;
  border:2px solid var(--wr-line);background:var(--hm-wash,#FFE8ED)}

.hm .hm-bridge__foot{margin:0;padding:20px 32px 24px;font-size:14.5px;
  line-height:1.65;color:var(--wr-body);text-align:center;
  background:rgba(20,20,20,.035);border-top:3px solid var(--wr-line)}

/* ========================================================= §3 THREAD ===== */
.hm .hm-h2row{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px}
.hm .hm-h2row h2{margin-bottom:0}
.hm .hm-textit .hm-intro{margin:16px 0 40px}
/* align-items:center, not start. These three pair a short block of copy or one
   oversized bubble against a tall stack of cards, and at 1440 `start` left 300-380px
   of dead column beside the taller side — which reads as a hole rather than as
   whitespace. The hero already centres for exactly this reason. Below 1024 the grid
   collapses to one column and the property is inert. */
.hm .hm-textit__grid{display:grid;grid-template-columns:1.25fr 1fr;gap:44px;
  align-items:center}
.hm .hm-textit__col{display:flex;flex-direction:column;gap:28px}
.hm .hm-thread--wide .hm-bub{max-width:84%}
.hm .hm-textit .hm-after{max-width:78ch;margin-top:40px}

/* a job, written the way the product writes one: a title, then the state as a
   sentence underneath. Never a status badge — that is the whole point. */
.hm .hm-jobitem{padding:13px 0;border-bottom:1px solid rgba(20,20,20,.1)}
.hm .hm-jobitem:last-child{border-bottom:0}
.hm .hm-jobitem__t{display:block;font-family:"Outfit",sans-serif;font-size:17px;
  font-weight:500;line-height:1.45;letter-spacing:-.012em;color:var(--wr-ink)}
.hm .hm-jobitem__s{display:block;font-family:"Outfit",sans-serif;font-size:15px;
  line-height:1.5;color:var(--wr-body);margin-top:3px}
.hm .hm-jobitem__s--block{color:var(--hm-need-ink)}
/* amber carries exactly one meaning, here and in the app: blocked on you */
.hm .hm-jobgrp--block{border:2px solid var(--hm-need);border-radius:14px;
  padding:14px 16px;margin:16px 0 6px}
.hm .hm-jobgrp__h{font-family:"Outfit",sans-serif;font-size:16px;font-weight:500;
  line-height:1.4;color:var(--hm-need-ink);margin:0}
.hm .hm-jobgrp__h--plain{color:var(--wr-ink);margin:18px 0 0}
.hm .hm-jobgrp__p{font-family:"Outfit",sans-serif;font-size:15px;line-height:1.55;
  color:var(--wr-body);margin:4px 0 0}
.hm .hm-jobgrp--block .hm-jobitem{border-bottom:0;padding-bottom:0}
.hm .hm-obj--rem{padding-bottom:22px}

/* ========================================================= §4 VERSUS ===== */
.hm .hm-versus h2{margin-bottom:40px}
.hm .hm-versus__grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;
  align-items:start}
.hm .hm-plain{padding-top:8px}
.hm .hm-plain h3,.hm .hm-cardcol h3{margin-bottom:18px}
.hm .hm-cardcol{background:#fff;border:3px solid var(--wr-line);border-radius:18px;
  box-shadow:var(--wr-shadow);padding:28px 30px 30px}
.hm .hm-cardcol .hm-tag{margin-bottom:18px}

/* ======================================================= §5 HOMEBOOK ===== */
.hm .hm-memory .hm-intro{margin-bottom:44px}
.hm .hm-memory__grid{display:grid;grid-template-columns:40% 1fr;gap:44px;
  align-items:center}
.hm .hm-memory__msg .hm-bub{max-width:100%}
.hm .hm-hb .hm-mini{margin-bottom:18px}
.hm .hm-hbcard{background:#fff;border:3px solid var(--wr-line);border-radius:18px;
  box-shadow:var(--wr-shadow-sm);padding:20px 22px 22px;margin-bottom:16px}
.hm .hm-hbcard:last-child{margin-bottom:0}
.hm .hm-hbcard h3{margin-bottom:8px}
.hm .hm-holds{margin-top:56px;padding-top:40px;border-top:3px solid var(--hm-red)}
.hm .hm-holds h3{margin-bottom:12px}
.hm .hm-holds .hm-mini{margin-top:32px}
.hm .hm-tabs{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px}
.hm .hm-tab{display:block;font-family:"Outfit",sans-serif;font-size:17px;
  font-weight:400;line-height:1.5;color:var(--wr-ink);background:#fff;
  border:3px solid var(--wr-line);border-radius:18px;padding:11px 18px;
  box-shadow:var(--wr-shadow-sm)}

/* =========================================================== §6 CARE ===== */
.hm .hm-triage__grid{display:grid;grid-template-columns:1fr 1.05fr;gap:52px;
  align-items:center}
.hm .hm-triage__copy p{max-width:52ch}
.hm .hm-outcomes{display:flex;flex-wrap:wrap;gap:12px 14px;margin-top:28px}
.hm .hm-tabstrip{display:flex;flex-wrap:wrap;gap:8px 10px;margin:0 0 20px}
.hm .hm-tabstrip__i{font-family:"Outfit",sans-serif;font-size:14px;font-weight:400;
  line-height:1;color:var(--wr-body);border:2px solid rgba(20,20,20,.18);
  border-radius:999px;padding:7px 12px}
.hm .hm-tabstrip__i--on{color:var(--wr-ink);border-color:var(--wr-line);
  background:var(--hm-field);font-weight:500}
.hm .hm-care__t{font-size:20px;margin-bottom:8px}
.hm .hm-care__meta{font-family:"Outfit",sans-serif;font-size:15px;line-height:1.6;
  color:var(--wr-body);margin:0 0 6px}
.hm .hm-over{display:inline-block;font-weight:500;color:var(--hm-over);
  background:var(--hm-over-bg);border:2px solid var(--wr-line);border-radius:999px;
  padding:2px 10px;margin-right:8px}
.hm .hm-care--two{margin-top:26px;padding-top:24px;
  border-top:3px solid var(--wr-line)}

/* =================================================== §7 WHAT IT DOESN'T === */
.hm .hm-unknown .hm-intro{margin-bottom:36px}
.hm .hm-warranty{background:#fff;border:3px solid var(--wr-line);border-radius:18px;
  box-shadow:var(--wr-shadow);padding:24px 26px 26px}
.hm .hm-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
  margin-bottom:28px}
.hm .hm-stat{background:#fff;border:3px solid var(--wr-line);border-radius:14px;
  box-shadow:var(--wr-shadow-sm);padding:16px 18px 18px}
/* the admission gets the tint, so the eye lands on it rather than skidding past */
.hm .hm-stat--unknown{background:var(--hm-field);border-left-width:10px}
.hm .hm-stat__n{display:block;font-family:"Outfit",sans-serif;font-size:40px;
  font-weight:500;line-height:1.1;letter-spacing:-.027em;color:var(--wr-ink)}
.hm .hm-stat__l{display:block;font-family:"Outfit",sans-serif;font-size:16px;
  line-height:1.4;color:var(--wr-body);margin-top:4px}
.hm .hm-unk__h{font-family:"Outfit",sans-serif;font-size:20px;font-weight:500;
  line-height:1.4;letter-spacing:-.015em;color:var(--wr-ink);margin:0}
.hm .hm-unk__p{font-family:"Outfit",sans-serif;font-size:16px;line-height:1.6;
  color:var(--wr-body);margin:6px 0 4px}
.hm .hm-unk{padding:16px 0;border-bottom:1px solid rgba(20,20,20,.1)}
.hm .hm-unk:last-child{border-bottom:0;padding-bottom:0}
.hm .hm-unk__t{display:block;font-family:"Outfit",sans-serif;font-size:18px;
  font-weight:500;line-height:1.4;letter-spacing:-.012em;color:var(--wr-ink)}
.hm .hm-unk__s{display:block;font-family:"Outfit",sans-serif;font-size:16px;
  line-height:1.55;color:var(--wr-body);margin-top:2px}
.hm .hm-unk__a{display:block;font-family:"Outfit",sans-serif;font-size:15px;
  font-weight:500;line-height:1.4;color:var(--hm-deep);margin-top:8px}
.hm .hm-unknown__grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;
  align-items:start;margin-top:44px}
.hm .hm-unknown__copy p{max-width:60ch}

/* the provenance caption, the app's most copyable idea: a permanent slot under
   every value saying where the value came from */
.hm .hm-prov{background:#fff;border:3px solid var(--wr-line);border-radius:18px;
  box-shadow:var(--wr-shadow);padding:24px 26px 26px}
.hm .hm-prov__t{font-size:22px;margin-bottom:6px}
.hm .hm-prov__sub{font-family:"Outfit",sans-serif;font-size:15px;line-height:1.6;
  color:var(--wr-body);margin:0 0 8px}
.hm .hm-prov__row{display:grid;grid-template-columns:34% 1fr;gap:2px 18px;
  padding:14px 0;border-bottom:1px solid rgba(20,20,20,.1)}
.hm .hm-prov__l{grid-row:span 2;font-family:"Outfit",sans-serif;font-size:17px;
  font-weight:500;line-height:1.4;letter-spacing:-.012em;color:var(--wr-ink)}
.hm .hm-prov__v{font-family:"Outfit",sans-serif;font-size:17px;line-height:1.4;
  color:var(--wr-ink)}
.hm .hm-prov__c{font-family:"Outfit",sans-serif;font-size:14px;line-height:1.45;
  color:var(--hm-deep)}
.hm .hm-prov__note{font-family:"Outfit",sans-serif;font-size:15px;line-height:1.65;
  color:var(--wr-body);margin:18px 0 0;padding-top:16px;
  border-top:1px solid rgba(20,20,20,.16)}

/* ========================================================= §8 PEOPLE ===== */
.hm .hm-people .hm-intro{margin-bottom:44px}

/* ======================================================== §9 NETWORK ===== */
.hm .hm-network .hm-intro{max-width:74ch;margin-bottom:20px}
/* An hm-obj standing between two paragraphs needs clearance for its own hard
   offset shadow — a plain margin puts the next line under the shadow, not under
   the card. */
.hm .hm-network .hm-obj{margin:24px 0 32px}
@media(max-width:767px){.hm .hm-network .hm-obj{margin:20px 0 26px}}
.hm .hm-netcards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  margin-top:44px;align-items:stretch}

/* ====================================================== §10 MODULES ====== */
/* carries the extra bottom padding that makes room for the dark band's card */
.hm .hm-mods{padding-bottom:150px}
.hm .hm-mods .hm-intro{margin-bottom:44px}
.hm .hm-mods__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px 20px;
  align-items:stretch}
.hm .hm-modgrp{background:#fff;border:3px solid var(--wr-line);border-radius:18px;
  box-shadow:var(--wr-shadow);padding:22px 22px 8px}
/* sentence case on purpose: the app sets these 10px uppercase, and 11px
   uppercase micro-type is Renobot's register on this site, not Handyman's */
.hm .hm-modgrp__h{font-family:"Outfit",sans-serif;font-size:18px;font-weight:500;
  line-height:1.4;letter-spacing:-.012em;color:var(--wr-ink);margin:0 0 4px;
  padding-bottom:12px;border-bottom:3px solid var(--wr-line)}
.hm .hm-modgrp__h--er{margin-top:14px;border-bottom-color:var(--hm-over)}
/* The same 14px offset WITHOUT the alarm. --hm-over is documented at the top of
   this file as "overdue, and in the app the Emergency item. Nothing else", and
   it was painting the rule under Renobot's "A person" row, which is the calmest
   thing on that page: the moment a question stops being yours and becomes a
   WeReno expert's. A second sub-heading in a card is a common enough shape that
   it needed its own modifier rather than borrowing the warning one. */
.hm .hm-modgrp__h--sub{margin-top:14px}
.hm .hm-mod{padding:14px 0;border-bottom:1px solid rgba(20,20,20,.1)}
.hm .hm-mod:last-child{border-bottom:0}
.hm .hm-mod__n{display:block;font-family:"Outfit",sans-serif;font-size:17px;
  font-weight:500;line-height:1.4;letter-spacing:-.012em;color:var(--wr-ink)}
.hm .hm-mod__d{display:block;font-family:"Outfit",sans-serif;font-size:15px;
  line-height:1.6;color:var(--wr-body);margin-top:3px}
/* built, not open — the roadmap register, held apart visually as well as in words */
.hm .hm-mod--soon .hm-mod__n{color:var(--wr-body)}
/* The label is a token, not a literal. It was hardcoded to "coming to your
   street" and Renobot and Opsonic inherited it wholesale when they took this
   sheet: Opsonic's is a badge on Supplier pricing, read by a contractor who
   works an area rather than a street, and Renobot's sits on a row already
   titled "Your area". Each product sets its own; Handyman keeps the default,
   because for a homeowner the street is exactly the right unit. */
.hm .hm-mod--soon .hm-mod__n::after{content:var(--hm-soon,"coming to your street");
  display:inline-block;margin-left:8px;font-size:13px;font-weight:400;
  border:2px solid rgba(20,20,20,.3);border-radius:999px;padding:2px 9px;
  vertical-align:middle}

/* ===================================== §11 PORTFOLIO VIEW — DARK BAND ===== */
/* The card straddles the band's top seam: it is the first thing in the band and
   is pulled up above it, so it sits half on the pale ground and half on the
   charcoal. §10 carries the extra bottom padding that makes room. */
.hm .hm-recur__card{position:relative;margin-top:-160px;background:#1C1C1C;
  border:3px solid var(--wr-line);border-radius:18px;box-shadow:var(--wr-shadow);
  padding:26px 32px 30px}
.hm .hm-recur__cap{font-family:"Outfit",sans-serif;font-size:16px;font-weight:400;
  line-height:1.5;color:rgba(251,246,239,.72);margin:0 0 18px}

.hm .hm-homes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.hm .hm-home{position:relative;display:flex;flex-direction:column;
  background:#242424;border:2px solid rgba(251,246,239,.22);border-radius:14px;
  padding:14px 16px 16px}
.hm .hm-home__ph{display:flex;align-items:center;justify-content:center;
  height:96px;border-radius:10px;margin-bottom:14px;
  background:repeating-linear-gradient(45deg,#d6d6d2 0 7px,#e8e8e4 7px 14px)}
.hm .hm-home__ph--none{background:#2E2E2E;border:1px dashed rgba(251,246,239,.4)}
.hm .hm-home__ph--none .hm-photo__t{background:rgba(251,246,239,.9)}
.hm .hm-home__badge{position:absolute;top:24px;right:26px;
  font-family:"Outfit",sans-serif;font-size:13px;font-weight:500;line-height:1;
  color:#1C1C1C;background:var(--hm-need);border-radius:999px;padding:6px 11px}
.hm .hm-home__n{display:block;font-family:"Outfit",sans-serif;font-size:18px;
  font-weight:500;line-height:1.4;letter-spacing:-.012em;color:var(--wr-cream)}
.hm .hm-home__a{display:block;font-family:"Outfit",sans-serif;font-size:14px;
  line-height:1.5;color:rgba(251,246,239,.7);margin-top:2px}
.hm .hm-home__s{display:block;font-family:"Outfit",sans-serif;font-size:15px;
  line-height:1.55;color:var(--wr-cream);margin-top:8px}
.hm .hm-homes__foot{font-family:"Outfit",sans-serif;font-size:15px;line-height:1.5;
  color:rgba(251,246,239,.72);margin:20px 0 0;padding-top:16px;
  border-top:1px solid rgba(251,246,239,.18)}

.hm .hm-recur__copy{margin-top:64px;max-width:76ch}
.hm .hm-obs{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);
  gap:28px;margin:48px 0 0;padding:0}
.hm .hm-obs li{position:relative;font-family:"Outfit",sans-serif;font-size:18px;
  line-height:1.7;color:var(--wr-cream);padding-left:24px}
.hm .hm-obs li::before{content:"";position:absolute;left:0;top:12px;
  width:10px;height:10px;background:var(--hm-light)}

/* ============================================================ §12 WHO ==== */
.hm .hm-whocards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
  align-items:stretch}
.hm .hm-netcards,.hm .hm-whocards{align-items:stretch}
.hm .hm-whocard{display:flex;flex-direction:column;background:#fff;
  border:3px solid var(--wr-line);border-radius:18px;box-shadow:var(--wr-shadow);
  padding:28px 26px 30px}
.hm .hm-glyph{color:var(--hm-deep);margin-bottom:18px}
.hm .hm-glyph svg{display:block;width:48px;height:48px}
.hm .hm-whocard h3{margin-bottom:10px;font-size:21px}

/* ======================================================== §13 HANDOFF ==== */
.hm .hm-handoff .hm-intro{margin-bottom:44px}
.hm .hm-tiles{display:grid;grid-template-columns:1fr auto 1fr;gap:28px;
  align-items:stretch}
.hm .hm-tile{display:flex;flex-direction:column;align-items:flex-start;
  border:3px solid var(--wr-line);border-radius:18px;box-shadow:var(--wr-shadow);
  padding:28px 30px 30px}
.hm .hm-tile--rb{background:var(--rb-field)}
.hm .hm-tile--hm{background:var(--hm-light)}
.hm .hm-tile__p{font-family:"Outfit",sans-serif;font-size:18px;line-height:1.7;
  color:var(--wr-ink);margin:20px 0 22px}
.hm .hm-tile .wr-link--ink{margin-top:auto}
/* Same call as the Renobot page's handoff tiles: at 28px — most of which is the
   robot glyph — the wordmark read as a caption rather than as the identity the
   tile exists to show. */
.hm .hm-tile .wr-mark{height:62px}
@media(max-width:1024px){.hm .hm-tile .wr-mark{height:52px}}
@media(max-width:767px){.hm .hm-tile .wr-mark{height:44px}}
/* Capital's art is 1.78:1 where Handyman's and Renobot's are 2.67:1, so at a
   shared box height its lettering comes out around two thirds the size. The
   substring also catches capital-wordmark-white.webp, which is the file that
   actually appears here. */
.hm .hm-tile .wr-mark[src*="capital-wordmark"]{height:84px}
@media(max-width:1024px){.hm .hm-tile .wr-mark[src*="capital-wordmark"]{height:70px}}
@media(max-width:767px){.hm .hm-tile .wr-mark[src*="capital-wordmark"]{height:60px}}
.hm .hm-here{margin-top:auto;font-family:"Nanum Pen Script",cursive;font-size:24px;
  line-height:1.2;color:var(--hm-deep)}
.hm .hm-arrowbox{display:flex;align-items:center;justify-content:center;
  color:var(--wr-ink)}
.hm .hm-arrow{display:block;width:64px;height:24px}

/* =========================================================== §14 FROM ==== */
.hm .hm-from__grid{display:grid;grid-template-columns:1fr 1.15fr;gap:52px;
  align-items:start}
.hm .hm-from__copy p{margin-bottom:26px}
.hm .hm-reallabel{font-family:"Outfit",sans-serif;font-size:16px;font-weight:500;
  line-height:1.5;color:var(--wr-ink)}

/* ============================================================ §15 FAQ ==== */
.hm .hm-faq{position:relative;overflow:hidden;padding-bottom:150px}
.hm .hm-faq__box{max-width:760px;margin-inline:auto}
.hm .hm-mini--faq{font-size:14px;font-weight:400;color:var(--wr-body);margin-bottom:10px}
.hm .hm-faq h2{margin-bottom:44px}
/* ---- the FAQ opens one reply at a time -------------------------------------
   Native <details>, so it needs no JavaScript, takes the keyboard for free, and
   every answer stays in the DOM for search and for reading with scripts off.
   It must NOT read as Renobot's accordion: the question stays a bubble and what
   opens is the reply, so the affordance lives inside the bubble rather than
   becoming a row of its own — which is also the only version that actually saves
   vertical space. */
.hm .hm-qa{margin-bottom:16px}
.hm .hm-qa:last-child{margin-bottom:0}
.hm .hm-qa .hm-row--them{margin-top:12px}

.hm .hm-qa > summary{cursor:pointer;list-style:none}
.hm .hm-qa > summary::-webkit-details-marker{display:none}
.hm .hm-qa > summary::marker{content:''}
.hm .hm-qa > summary .hm-bub--you{
  display:flex;align-items:center;gap:14px;transition:background-color .15s ease}
.hm .hm-qa > summary:hover .hm-bub--you{background:#0A5FC4}
.hm .hm-qa > summary:focus{outline:none}
.hm .hm-qa > summary:focus-visible .hm-bub--you{
  background:#0A5FC4;outline:3px solid var(--wr-ink);outline-offset:3px}

/* the question sets its own colour, so it has to invert with its bubble */
.hm .hm-qa > summary .hm-bub--you .hm-q,
.hm .hm-qa > summary .hm-bub--you{color:#fff}
.hm .hm-qa__ic{flex:0 0 auto;display:flex;color:rgba(255,255,255,.85)}
.hm .hm-qa__ic svg{width:17px;height:17px;display:block}
.hm .hm-qa[open] .hm-qa__ic{transform:rotate(180deg)}
@media(prefers-reduced-motion:no-preference){
  .hm .hm-qa__ic{transition:transform .2s cubic-bezier(.2,.7,.3,1)}
  .hm .hm-qa[open] .hm-row--them{animation:hm-reply .26s cubic-bezier(.2,.7,.3,1) both}
  @keyframes hm-reply{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}
.hm .hm-q{font-family:"Outfit",sans-serif;font-size:18px;font-weight:500;
  line-height:1.5;letter-spacing:-.012em;color:var(--wr-ink);margin:0}

/* ================================================= §16 EARLY ACCESS ====== */
.hm .hm-ea{position:relative}
.hm .hm-ea__grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;
  align-items:start}
.hm .hm-ea__copy p{max-width:46ch}
/* .wr-card in the markup supplies background, border and shadow — and, crucially,
   tells the base sheet this is a LIGHT surface so the dark band's white type does
   not leak into the link inside it. Only the offset, radius and padding differ. */
.hm .hm-ea__card{margin-top:-160px;border-radius:18px;padding:30px 32px 32px}
.hm .hm-ea__foot{margin-top:22px}
/* The signup sheet (wereno-handyman-signup.css) owns .wrh-inline and styles the
   field, the row and the ≤480 column. It is linked from handyman.html, so the
   stand-in that used to live here has been removed — it was scoped tighter than
   .wrh-inline and would have won. */

/* The robot peeks in from the section edge rather than posing. It is cropped
   by object-fit inside a box that stays inside the viewport, so nothing
   overflows the document. */
.hm .hm-ea__crop{position:absolute;right:0;bottom:26px;width:78px;height:124px;
  overflow:hidden;pointer-events:none}
.hm .hm-robot{display:block;width:78px;height:124px;object-fit:cover;
  object-position:left center}

/* ================================================================ 1024 === */
@media(max-width:1024px){
  .hm .hm-orn{display:none}

  .hm .hm-hero__grid{grid-template-columns:1fr;gap:44px}
  .hm .hm-phone{width:min(320px,100%)}

  .hm .hm-guards__grid{grid-template-columns:1fr;gap:44px}

  .hm .hm-textit__grid{grid-template-columns:1fr;gap:28px}
  .hm .hm-thread--wide .hm-bub{max-width:86%}

  .hm .hm-memory__grid{grid-template-columns:1fr;gap:28px}
  .hm .hm-bub__xl{font-size:26px}
  .hm .hm-bub__lg{font-size:20px}

  .hm .hm-triage__grid{grid-template-columns:1fr;gap:36px}

  .hm .hm-stats{grid-template-columns:repeat(2,1fr)}
  .hm .hm-unknown__grid{grid-template-columns:1fr;gap:36px;margin-top:36px}

  .hm .hm-netcards{grid-template-columns:1fr 1fr;gap:16px;margin-top:32px}

  .hm .hm-mods{padding-bottom:110px}
  .hm .hm-mods__grid{grid-template-columns:1fr 1fr;gap:20px 16px}

  .hm .hm-recur__card{margin-top:-112px;padding:22px 22px 24px}
  .hm .hm-homes{grid-template-columns:1fr 1fr;gap:16px}
  .hm .hm-home__badge{top:20px;right:20px}
  .hm .hm-recur__copy{margin-top:48px}
  .hm .hm-obs{grid-template-columns:1fr;gap:14px;margin-top:36px}

  .hm .hm-whocards{grid-template-columns:1fr 1fr;gap:16px}

  .hm .hm-from__grid{grid-template-columns:1fr;gap:36px}

  .hm .hm-faq{padding-bottom:110px}

  .hm .hm-ea__grid{gap:32px}
  .hm .hm-ea__card{margin-top:-112px;padding:24px 24px 26px}

  .hm .hm-obj,.hm .hm-panel,.hm .hm-cardcol,.hm .hm-whocard,.hm .hm-modgrp,
  .hm .hm-tile,.hm .hm-recur__card,.hm .hm-ea__card,.hm .hm-phone,.hm .hm-tab,
  .hm .hm-warranty,.hm .hm-prov,.hm .hm-hbcard,.hm .hm-comp,
  .hm .hm-bub{border-radius:16px}
  .hm .hm-bub--you{border-bottom-right-radius:3px;border-bottom-left-radius:14px}
  .hm .hm-bub--them,.hm .hm-bub--ans{border-bottom-left-radius:3px;border-bottom-right-radius:14px}
}

/* ================================================================= 767 === */
@media(max-width:767px){
  .hm .hm-bub{font-size:16px;max-width:88%;padding:11px 14px}
  .hm .hm-thread--wide .hm-bub{max-width:90%}
  .hm .hm-bub__xl{font-size:24px}
  .hm .hm-bub__lg{font-size:19px}
  .hm .hm-row--them{padding-left:48px}
  .hm .hm-face,.hm .hm-wr{width:26px;height:26px}

  .hm .hm-hero__grid{gap:36px}
  .hm .hm-actions{gap:14px 20px}
  .hm .hm-actions .wr-btn{flex:1 1 100%}

  .hm .hm-bridge__cols{grid-template-columns:1fr}
  .hm .hm-bridge__col--rb{border-right:0;border-bottom:3px solid var(--wr-line)}
  .hm .hm-bridge__bottom{padding:24px 20px 22px}
  .hm .hm-bridge__col{padding:22px 20px 26px}
  .hm .hm-bridge__cap{width:calc(100% + 40px);margin:-22px -20px 16px;padding:15px 20px 13px}
  .hm .hm-bridge__line{white-space:normal}
  .hm .hm-bridge__stat b{font-size:28px}
  .hm .hm-bridge__foot{padding:18px 20px 20px}

  .hm .hm-panel{padding:18px}
  .hm .hm-obj{padding:18px 18px 6px}

  .hm .hm-versus__grid{grid-template-columns:1fr;gap:26px}
  .hm .hm-cardcol{padding:22px 22px 24px}

  .hm .hm-holds{margin-top:40px;padding-top:30px}
  .hm .hm-tabs{grid-template-columns:1fr;gap:12px}
  .hm .hm-tab{font-size:16px;padding:10px 15px}

  /* the rebuilt screen leads on phones */
  .hm .hm-triage__grid{gap:28px}
  .hm .hm-triage__art{order:-1}

  .hm .hm-warranty{padding:18px 18px 20px}
  .hm .hm-stats{gap:12px}
  .hm .hm-stat{padding:13px 14px 14px}
  .hm .hm-stat__n{font-size:32px}
  .hm .hm-prov{padding:18px 18px 20px}
  .hm .hm-prov__row{grid-template-columns:1fr;gap:2px}
  .hm .hm-prov__l{grid-row:auto}

  .hm .hm-netcards{grid-template-columns:1fr;gap:16px;margin-top:32px}

  .hm .hm-mods{padding-bottom:72px}
  .hm .hm-mods__grid{grid-template-columns:1fr;gap:16px}
  .hm .hm-modgrp{padding:18px 18px 6px}

  .hm .hm-recur__card{margin-top:-72px;padding:16px 14px 18px}
  .hm .hm-recur__cap{font-size:14px}
  .hm .hm-homes{grid-template-columns:1fr;gap:14px}
  .hm .hm-home__badge{position:static;align-self:flex-start;margin-bottom:10px}
  .hm .hm-recur__copy{margin-top:36px}
  .hm .hm-obs li{font-size:16px}

  .hm .hm-whocards{grid-template-columns:1fr;gap:16px}
  .hm .hm-whocard{padding:22px 22px 24px}

  .hm .hm-tiles{grid-template-columns:1fr;gap:16px}
  .hm .hm-tile{padding:22px 22px 24px}
  .hm .hm-arrowbox{transform:rotate(90deg)}
  .hm .hm-arrow{width:44px;height:18px}

  .hm .hm-faq{padding-bottom:40px}
  .hm .hm-faq h2{margin-bottom:30px}
  .hm .hm-qa{margin-bottom:26px}
  .hm .hm-q{font-size:17px}

  .hm .hm-ea__grid{grid-template-columns:1fr;gap:26px}
  .hm .hm-ea__card{margin-top:0;padding:20px 20px 22px}
  .hm .hm-ea__crop{display:none}
  .hm .hm-ea__form > form{flex-direction:column;align-items:stretch;max-width:100%}
  .hm .hm-ea__form input[type="email"]{flex:0 0 auto;width:100%;height:48px}

  .hm .hm-obj,.hm .hm-panel,.hm .hm-cardcol,.hm .hm-whocard,.hm .hm-modgrp,
  .hm .hm-tile,.hm .hm-recur__card,.hm .hm-ea__card,.hm .hm-phone,.hm .hm-tab,
  .hm .hm-warranty,.hm .hm-prov,.hm .hm-hbcard,.hm .hm-comp,
  .hm .hm-bub{border-radius:14px}
  .hm .hm-bub--you{border-bottom-right-radius:3px;border-bottom-left-radius:14px}
  .hm .hm-bub--them,.hm .hm-bub--ans{border-bottom-left-radius:3px;border-bottom-right-radius:14px}
}

/* --- the handset at phone widths ---------------------------------------
   At 320px wide the chrome was taking a quarter of the screen: a 94px
   contact header, and an avatar whose robot overflowed its disc far enough
   to reach up into the status bar and crowd the island. Everything here
   shrinks the frame so the thread keeps the room, and pulls the robot's
   overflow back to something a 34px disc can carry.                       */
@media(max-width:767px){
  .hm .hm-phone{padding:9px;border-radius:40px}
  .hm .hm-phone__screen{border-radius:32px}
  .hm .hm-phone__island{width:68px;height:20px;top:7px}
  .hm .hm-phone__status{padding:9px 16px 3px;font-size:12px}
  .hm .hm-phone__head{padding:7px 0 6px;gap:4px}
  .hm .hm-phone__back{left:10px}
  .hm .hm-phone__back svg{width:9px;height:15px}
  .hm .hm-avatar{width:34px;height:34px}
  .hm .hm-avatar img{width:42px;height:42px;bottom:-2px}
  .hm .hm-phone__who{font-size:12.5px}
  .hm .hm-phone .hm-bub{font-size:13.5px;padding:8px 11px}
  .hm .hm-phone .hm-row--them{padding-left:0}
  .hm .hm-phone .hm-face{width:20px;height:20px}
  .hm .hm-phone__bar{padding:7px 10px 5px;gap:7px}
  .hm .hm-phone__plus,.hm .hm-phone__send{width:23px;height:23px}
  .hm .hm-phone__field{padding:4px 11px;font-size:12.5px}
  .hm .hm-phone__home{width:96px;margin:5px auto 7px}
  /* 320x525 was 1:1.64; a handset is nearer 1:2.16, and the thread is the
     only part that should absorb the extra height */
  .hm .hm-phone--live .hm-thread{height:clamp(380px,54vh,470px)}
}

/* ================================================================= 420 === */
@media(max-width:420px){
  .hm .hm-stats{grid-template-columns:1fr 1fr}
  .hm .hm-tabstrip__i{font-size:13px;padding:6px 10px}
  .hm .hm-badge{font-size:10px;padding:4px 7px}
}

/* The highlighted-text underline needs its geometry from the theme's own
   widget stylesheet. These four declarations duplicate it, scoped to .hm, so
   the h1 can never render a 300x150 inline SVG if that sheet is absent. */
.hm .ui-e-headline-text{position:relative}
.hm .ui-e-headline-text svg{position:absolute;top:auto;left:50%;width:106%;
  height:100%;transform:translate(-50%);overflow:visible}
.hm .ui-e-headline-text svg path{fill:none}
.hm .ui-e-headline-highlighted{position:relative;z-index:1}
.hm .ui-e-headline-stroke1{display:inline-block}

/* The band runs straight into the footer, which brings its own 66px of top
   spacing before its logo. The band's own 48px on top of that left a long
   run of flat colour between the CTA card and anything else. */
.hm .hm-ea{padding-bottom:20px}
@media(max-width:1024px){.hm .hm-ea{padding-bottom:16px}}
@media(max-width:767px){.hm .hm-ea{padding-bottom:14px}}

/* The header overlays the hero, and trimming the hero's top padding from
   150 to 110 left the phone's badge sitting under the menu. The copy
   column starts lower down anyway, so only the art needs the offset, and
   only where the two sit side by side. */
@media(min-width:1025px){ .hm .hm-hero__art{margin-top:64px} }

/* --- the headline sits on two lines, one sentence each ------------------
   Each sentence is its own unbreakable line. The theme's own h1 sizes are
   kept; only the narrow desktop band and small phones need a nudge, where
   the column gets tighter than the longer sentence. */
/* A forced newline after the first sentence, rather than display:block on
   the spans. Block makes the highlighted span fill the column, and the
   theme's underline SVG is sized to that span, so it stretched the full
   width and overflowed the page at four breakpoints. Inline spans keep the
   underline the width of the words it sits under. */
.hm .hm-hero h1 > .ui-e-headline-text:first-child::after{content:"\A";white-space:pre}
@media(min-width:1025px) and (max-width:1279px){ .hm .hm-hero h1{font-size:56px} }
@media(max-width:767px){ .hm .hm-hero h1{font-size:37px} }

/* ── the demo badge gets the space it was already using ─────────────────────
 * hm-badge--above is absolutely positioned at bottom:calc(100% + 14px), so it
 * parks in a band it does not reserve. On desktop that band is empty; on a
 * phone the hero stacks and the "See a thread" link lands in exactly that band,
 * so the two rendered on top of each other on all three product pages.
 * Measured at 390: the badge ran 691 to 715 and the link 660 to 693.
 *
 * The badge stays ABSOLUTE. Its parent is .hm-phone itself, so putting it in
 * normal flow moves it inside the handset and turns it into a sticker on the
 * screen, which is the one thing the comment above this block says not to do.
 * What was missing was not a different position, it was the 48px the badge has
 * always occupied: 14px of gap plus its own height, reserved on the phone
 * instead of borrowed from whatever happened to be above it.
 */
@media(max-width:1024px){
  .hm .hm-hero__art .hm-phone{margin-top:48px}
}

/* ── read receipts and tapbacks ─────────────────────────────────────────────
 * The two details that make a thread read as a thread rather than as a list of
 * quotes. Both are decorative and both are aria-hidden: the copy already
 * carries every piece of meaning, and a screen reader announcing "heart" after
 * a sentence adds nothing.
 */
/* The row wraps so the receipt drops onto its own line under the bubble it
   belongs to, rather than trying to share the line with it. .hm-row is a flex
   row aligned to one end, so without this the receipt sits alongside. */
.hm .hm-row--you{flex-wrap:wrap}
.hm .hm-row--you > .hm-receipt{width:100%}

.hm .hm-receipt{
  /* Inside its row now, so the negative top margin that used to pull it up
     against the bubble above is pulling it INTO that bubble instead: at -9px
     the row measured 46px for a 44px bubble and the text rendered on the
     bubble's own bottom edge, which is why it read as missing. A small
     positive margin is what it needs from here. Still tight, because the phone
     screen is a fixed height and the longest scene had 4px of headroom. */
  margin:2px 2px 0;padding:0;
  font-family:"Outfit",sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.015em;line-height:1.2;text-align:right;
  color:rgba(20,20,20,.42)}
.hm .hm-phone--live .hm-receipt{color:rgba(20,20,20,.45)}

/* The tapback sits on the corner of the bubble nearest the middle of the
   thread: top-left on your own right-aligned message, top-right on theirs.
   Backwards is the detail that makes a fake thread look fake. */
.hm .hm-tap{
  position:absolute;top:-12px;z-index:3;
  display:flex;align-items:center;justify-content:center;
  min-width:24px;height:24px;padding:0 5px;
  background:#fff;border:2.5px solid var(--wr-line);border-radius:999px;
  font-size:13px;line-height:1;
  box-shadow:0 2px 0 0 rgba(0,0,0,.85);
  /* the emoji must not inherit the bubble's colour on a blue bubble, and it
     must not inherit its font either: Outfit has no glyphs for these */
  color:initial;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.hm .hm-tap--you{left:-11px}
.hm .hm-tap--them{right:-11px}
/* Held back until the agent opens the thread. Revealed with the bubble it is
   attached to, the reaction would arrive before anything had read the message;
   released with the Read flip, the order on screen is the real one: you send,
   it is delivered, the agent reacts, then it types. */
.hm .hm-tap{transition:transform .22s cubic-bezier(.2,1.6,.4,1),opacity .14s ease}
.hm .hm-tap--wait{opacity:0;transform:scale(.3)}

/* A tapback overhangs the bubble, so the row above gives it room. Only a
   little: it sits on the OUTER corner, over the gutter the opposite-side bubble
   leaves empty, so it needs clearance from the row above rather than a full
   row's worth of it. Every scene carries one now, and at 16px that was 16px of
   thread height per scene on a screen with none to spare. */
.hm .hm-row{margin-top:2px}
.hm .hm-row:has(.hm-tap){margin-top:6px}

@media(max-width:767px){
  .hm .hm-tap{min-width:24px;height:24px;font-size:12px;top:-12px}
  .hm .hm-receipt{font-size:10.5px}
}

/* The three-card set on /renobot/your-project, /handyman/your-property and
   /opsonic/jobs was a heading and a paragraph in an empty white box, with the
   space where an icon belongs left blank. Line icons in the house weight,
   drawn in currentColor so each one picks up the accent of the product page
   it is sitting on. */
.hm .hm-hbcard__i{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;margin-bottom:12px;
  background:var(--wr-acc);border:2.5px solid var(--wr-line);border-radius:12px;
  box-shadow:0 3px 0 0 rgba(0,0,0,.85);color:#141414}
.hm .hm-hbcard__i svg{width:23px;height:23px;display:block}
@media(max-width:767px){
  .hm .hm-hbcard__i{width:38px;height:38px;margin-bottom:10px;border-radius:10px}
  .hm .hm-hbcard__i svg{width:20px;height:20px}
}