/* handyman.ai/hire: the ad landing page (Onboarding Hub lane O2). join v5's look (the app's green on pale paper, the
   violet of Handyman's own voice), four screens, phone first. A phone: the headline stays (join v5 hid it), then the
   step card fills the rest of the window, its button in thumb reach at the foot; only the card's middle scrolls. From
   960px the page fits the window: the ad's words and picture on the left, the card on the right. Light first, dark once
   somebody picks it (hm.theme, /js/join-theme.js). */

@font-face { font-family: 'Funnel Display'; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url(/fonts/Funnel/funnel-display-v3-latin.woff2) format('woff2'); }
@font-face { font-family: 'Funnel Sans'; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url(/fonts/Funnel/funnel-sans-v3-latin.woff2) format('woff2'); }

:root {
  --g: #5fbb3c; --gd: #3f8f22; --g-ink: #11300a; --g-soft: #e9f5e3; --go: #2f7d16; --go-ink: #ffffff;
  --ink: #1c1c1c; --sub: #5f6460; --faint: #767b74; --line: #e3e6df; --bg: #ffffff; --tint: #f2f6ef; --paper: #f6f8f5;
  --hm: #6b55cf; --hm-soft: #f1eefc; --hm-ink: #3c2f86;
  --stop: #b4361f; --wait: #8a5708; --wait-soft: #fbf0db;
  --display: 'Funnel Display', 'Avenir Next', system-ui, sans-serif;
  --text: 'Funnel Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --shadow: 0 1px 2px rgb(0 0 0 / .05), 0 18px 40px rgb(30 40 30 / .10);
  color-scheme: light;
}
:root[color-scheme="dark"] {
  color-scheme: dark;
  --g: #6fcf4a; --gd: #8bdc69; --g-ink: #0b1f06; --g-soft: #18301a; --go: #6fcf4a; --go-ink: #0b1f06;
  --ink: #eef1ec; --sub: #a8afa6; --faint: #8d948b; --line: #2a302a; --bg: #171b17; --tint: #1d231d; --paper: #101310;
  --hm: #9d8cff; --hm-soft: #231f3d; --hm-ink: #cfc6ff;
  --stop: #ff8a73; --wait: #f0b34a; --wait-soft: #33270f;
  --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 18px 40px rgb(0 0 0 / .35);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body.hire { background: var(--paper); color: var(--ink); font: 16px/1.45 var(--text); -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
svg { flex: none; }
[hidden] { display: none !important; }

/* ── the frame: one window, never a page that scrolls ── */
.hr-shell { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.hr-top { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; max-width: 1180px;
  margin: 0 auto; padding: calc(4px + env(safe-area-inset-top)) 16px 2px; }
.hr-logo { display: inline-flex; align-items: center; min-height: 44px; }
.hr-logo img { display: block; height: 40px; width: auto; }
.hr-logo__d, :root[color-scheme="dark"] .hr-logo__l { display: none !important; }
:root[color-scheme="dark"] .hr-logo__d { display: block !important; }
.hr-top__end { display: flex; align-items: center; gap: 10px; }
.hr-count { font: 600 13px/1 var(--text); color: var(--sub); letter-spacing: .02em; }
.hr-theme { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border-radius: 50%;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink); }
.hr-theme svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hr-theme .i-sun, :root[color-scheme="dark"] .hr-theme .i-moon { display: none; }
:root[color-scheme="dark"] .hr-theme .i-sun { display: block; }

.hr-main { flex: 1 1 auto; min-height: 0; width: 100%; max-width: 1180px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px;
  padding: 0 16px calc(10px + env(safe-area-inset-bottom)); }

/* ── the ad's words ── */
.hr-intro { flex: none; }
.hr-h1 { margin: 2px 0 0; font: 700 clamp(22px, 6.4vw, 30px)/1.12 var(--display); letter-spacing: -.015em; text-wrap: balance; }
.hr-sub { margin: 6px 0 0; color: var(--sub); font-size: 15px; line-height: 1.4; }
.hr-hero { margin: 0; }
/* the proof band (lane H4, tools/proof.py): under the price on a phone, under the picture on a computer */
.hr-proof { --proof-display: var(--display); color: var(--ink); }
.hr-proof--phone { margin-top: 10px; }
.hr-proof--wide { display: none; }
/* A phone: the top is one short line (the founder, 2026-10-23: "reduce the top text section and move the your job card
   up"): the headline's last sentence (hire.js drawIntro), no line under it, so the job card and its button are in the
   first screen. A computer keeps both whole. */
@media (max-width: 959.98px) {
  .hr-sub, .hr-h1__lead { display: none; }
  .hr-h1 { font-size: 21px; line-height: 1.15; }
  .hr-shell:not([data-step="1"]) .hr-h1 { font-size: 19px; }
  .hr-hero { display: none !important; }
}

/* ── the card: the step, its middle scrolls, its button at the foot ── */
.hr-card { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--line);
  border-radius: 22px; box-shadow: var(--shadow); overflow: hidden; }
.hr-body { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 16px 16px 8px; }
.hr-s { display: none; }
.hr-shell[data-step="1"] .hr-s[data-s="1"], .hr-shell[data-step="2"] .hr-s[data-s="2"], .hr-shell[data-step="3"] .hr-s[data-s="3"],
.hr-shell[data-step="4"] .hr-s[data-s="4"], .hr-shell[data-step="done"] .hr-s[data-s="done"], .hr-shell[data-step="photo"] .hr-s[data-s="photo"] { display: block; animation: hr-in .22s ease-out; }
@keyframes hr-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hr-s { animation: none !important; } }

.hr-dock { position: relative; z-index: 1; flex: none; padding: 10px 16px 12px; border-top: 1px solid var(--line); background: var(--bg);
  transition: box-shadow .2s ease, border-color .2s ease; }
/* HF-1: the body scrolls under the dock; while there is more below, a clear edge and a soft shadow over it */
.hr-card.hr-under .hr-dock { border-top-color: var(--line); box-shadow: 0 -10px 18px -12px rgb(0 0 0 / .28); }
:root[color-scheme="dark"] .hr-card.hr-under .hr-dock { box-shadow: 0 -10px 18px -10px rgb(0 0 0 / .7); }
/* HF-1: the first screen's price-box buttons, moved here by hire.js liftGo (only on step 1) */
.hr-dock__picks { display: flex; align-items: center; gap: 10px; }
.hr-dock__picks[hidden], .hr-shell:not([data-step="1"]) .hr-dock__picks { display: none; }
.hr-shell[data-step="1"][data-lifted] .hr-dock__row { display: none; }
.hr-dock__picks > .hr-go { min-height: 50px; font-size: 16px; }
.hr-dock__picks .hr-we__two { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }
.hr-dock__picks .hr-we__two .hr-go { min-height: 54px; padding: 4px 10px; font-size: 14.5px; line-height: 1.2; }
@media (min-width: 520px) { .hr-dock__picks .hr-we__two .hr-go { font-size: 15.5px; } }
.hr-dock__price { flex: 0 1 auto; min-width: 0; max-width: 46%; margin: 0; font-weight: 700; font-size: 13.5px; line-height: 1.2;
  font-variant-numeric: tabular-nums; }
@media (min-width: 520px) { .hr-dock__price { font-size: 14.5px; } }
.hr-dock__price[hidden] { display: none; }
.hr-dock__pk { display: block; margin-bottom: 2px; font: 650 10.5px/1.2 var(--text); letter-spacing: .06em; text-transform: uppercase; color: var(--hm-ink); }
.hr-dock__price:not([hidden]) { display: flex; flex-direction: column; justify-content: center; min-height: 44px; }
.hr-dock__price .hr-rlink { display: block; }
.hr-dock__price .hr-rlink .hr-tax { display: block; font-size: 12px; }
.hr-dock__row { display: flex; gap: 10px; }
.hr-go { flex: 1; display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 18px; border: 0;
  border-radius: 16px; background: var(--go); color: var(--go-ink); font: 700 17px/1.2 var(--text); text-align: center; text-decoration: none;
  transition: transform .12s, opacity .2s; }
.hr-go:active { transform: scale(.985); }
.hr-go:disabled { opacity: .55; cursor: default; }
.hr-go.is-busy::before { content: ''; width: 16px; height: 16px; margin-right: 10px; border-radius: 50%; border: 2.5px solid currentColor;
  border-right-color: transparent; animation: hr-spin .7s linear infinite; }
@keyframes hr-spin { to { transform: rotate(360deg); } }
.hr-go:focus-visible, .hr-back:focus-visible, .hr-opt:focus-visible, .hr-hit:focus-visible, .hr-cand:focus-visible, .hr-link:focus-visible,
.hr-theme:focus-visible { outline: 3px solid var(--g); outline-offset: 2px; }
.hr-back { flex: none; width: 54px; min-height: 54px; display: inline-flex; align-items: center; justify-content: center; border-radius: 16px;
  border: 1px solid var(--line); background: var(--bg); }
.hr-back svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hr-trust { margin: 8px 0 0; color: var(--sub); font-size: 12.5px; line-height: 1.35; text-align: center; }
.hr-trust b { color: var(--ink); font-weight: 650; }

/* ── words in the card ── */
.hr-k { margin: 0 0 8px; font: 650 12px/1.2 var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--sub); }
.hr-k--sm { margin-top: 16px; }
.hr-h2 { margin: 0 0 12px; font: 700 21px/1.2 var(--display); letter-spacing: -.01em; }
.hr-label { display: block; margin: 14px 0 6px; font-weight: 650; font-size: 15px; }
.hr-h2 + .hr-label { margin-top: 0; }
.hr-note { margin: 8px 0 0; color: var(--sub); font-size: 14px; }
.hr-note--hm { color: var(--hm-ink); background: var(--hm-soft); border-radius: 12px; padding: 10px 12px; }
.hr-note--hm:empty { display: none; }
.hr-err { margin: 8px 0 0; color: var(--stop); font-weight: 600; font-size: 14px; }
.hr-err:empty { display: none; }
.hr-fine { margin: 12px 0 0; color: var(--faint); font-size: 12px; line-height: 1.4; }
.hr-fine a { color: var(--sub); }

/* the job */
.hr-job { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px; border-radius: 18px;
  background: var(--tint); border: 1.5px solid var(--g); }
.hr-job__art { width: 84px; height: 84px; border-radius: 14px; background: #fff center / cover no-repeat; border: 1px solid var(--line); }
.hr-job__t { margin: 0; font: 700 17px/1.25 var(--display); }
.hr-job__k { margin: 6px 0 0; font-size: 13px; color: var(--sub); font-weight: 600; }
.hr-job__p { margin: 2px 0 0; font: 800 30px/1 var(--display); letter-spacing: -.02em; color: var(--ink); }
.hr-job__p--q { font-size: 20px; color: var(--gd); }
.hr-job__n { grid-column: 1 / -1; margin: 0; color: var(--sub); font-size: 13.5px; }
.hr-job__inc { grid-column: 1 / -1; margin: 0; padding-top: 10px; border-top: 1px solid var(--line); color: var(--sub); font-size: 13.5px; line-height: 1.45; }
.hr-job__inc b { display: block; color: var(--ink); font-weight: 700; font-size: 13px; }
/* Diagnostic Visits D5: the two-price card (the visit now, the likely fix where the server shows it) */
.hr-diag { grid-column: 1 / -1; margin: 0; padding-top: 10px; border-top: 1px solid var(--line); display: grid; gap: 6px; min-width: 0; }
.hr-diag__h { margin: 0; font: 700 15px/1.25 var(--display); color: var(--ink); }
.hr-diag__p { margin: 0; color: var(--sub); font-size: 13.5px; line-height: 1.45; }
.hr-diag__rule { color: var(--ink); }
.hr-diag__k { margin: 2px 0 0; font-size: 12.5px; font-weight: 700; color: var(--sub); text-transform: uppercase; letter-spacing: .04em; }
.hr-diag__row { margin: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; font-size: 14px; line-height: 1.35; color: var(--ink); }
.hr-diag__row span { min-width: 0; }
.hr-diag__row small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--sub); font-weight: 600; }
.hr-diag__row--after b { color: var(--sub); font-weight: 600; font-size: 13.5px; }
.hr-diag__fig { flex: none; font: 800 18px/1.2 var(--display); font-variant-numeric: tabular-nums; }
.hr-diag__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.hr-diag__list li { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; line-height: 1.35; color: var(--ink); }
.hr-diag__list li span:last-child { flex: none; color: var(--sub); }
.hr-job__else { grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; gap: 4px; min-height: 44px;
  margin: -6px 0 -8px; padding: 0 12px 0 0; border: 0; background: none; color: var(--hm-ink); font: 700 15px/1.2 var(--text); }
.hr-job__else svg { width: 18px; height: 18px; fill: none; stroke: var(--hm); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hr-job__else:focus-visible { outline: 3px solid var(--hm); outline-offset: 2px; border-radius: 8px; }
/* lane E1: "Tell me what needs doing", the card when nothing is picked (their words, up to 4 choices, none picked) */
.hr-job.hr-job--tell { display: block; }
.hr-tell__said { margin: 0 0 4px; font: 650 11.5px/1.2 var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--hm-ink); }
.hr-tell__rows { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.hr-job--tell .hr-job__else { margin: 6px 0 -6px; }
.hr-job--tell .hr-label { margin-top: 12px; }
.hr-job--tell .hr-field { background: var(--bg); }
.hr-tell__from { font-size: 12.5px; }
.hr-search { margin-top: 10px; }
.hr-hits { display: grid; gap: 6px; margin-top: 8px; }
.hr-hit { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 8px 12px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--bg); text-align: left; font-size: 15px; }

/* lane E5: the flooring calculator (mockup C): what floor (none picked), how big (rooms or square feet), also do, the
   server's sum. Every control is at least 44px tall; the card's middle scrolls, never the page. */
.hr-calc__h { margin: 0; font: 700 17px/1.25 var(--display); }
.hr-mats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.hr-mat { text-align: left; min-height: 56px; padding: 8px 12px; }
.hr-mat b { display: block; font-weight: 700; font-size: 15px; line-height: 1.2; }
.hr-calc__fine { margin: 8px 0 0; color: var(--sub); font-size: 13px; line-height: 1.4; }
.hr-calc .hr-label { margin-top: 14px; }
.hr-calc .hr-two .hr-opt { text-align: left; }
.hr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hr-chip { min-height: 44px; padding: 0 12px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--bg); font-weight: 600; font-size: 14px; }
.hr-chip[aria-pressed="true"] { border-color: var(--g); background: var(--g-soft); box-shadow: inset 0 0 0 1px var(--g); }
.hr-chip:focus-visible, .hr-add__b:focus-visible, .hr-step__b:focus-visible, .hr-room__rm:focus-visible { outline: 3px solid var(--g); outline-offset: 2px; }
.hr-room { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.hr-room__x { color: var(--sub); font-weight: 700; }
.hr-dim { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 10px; border-radius: 12px;
  border: 1.5px solid var(--line); background: var(--bg); }
.hr-dim:focus-within { border-color: var(--g); }
.hr-dim input { flex: 1; min-width: 2.5em; width: 100%; height: 44px; border: 0; outline: 0; background: transparent; font-size: 17px; font-weight: 650; }
.hr-dim span { flex: none; color: var(--sub); font-size: 13.5px; }
.hr-dim--wide { margin-top: 8px; }
.hr-room__rm { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg); color: var(--sub); font-size: 18px; }
.hr-calc__links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 4px; }
.hr-calc__help { margin: 6px 0 0; color: var(--sub); font-size: 13.5px; line-height: 1.4; }
.hr-adds { display: flex; flex-direction: column; gap: 6px; }
.hr-add { border-radius: 14px; border: 1px solid var(--line); background: var(--bg); }
.hr-add.is-on { border-color: color-mix(in srgb, var(--g) 60%, var(--line)); }
.hr-add__b { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 6px 12px; border: 0; background: none; text-align: left; }
.hr-add__bx { flex: none; width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--line); background: var(--bg); }
.hr-add__b[aria-checked="true"] .hr-add__bx { border-color: var(--g); background: var(--g) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 14px no-repeat; }
.hr-add__t { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; line-height: 1.25; }
.hr-add__t small { display: block; color: var(--sub); font-weight: 500; font-size: 12.5px; }
.hr-add__am { flex: none; font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; }
.hr-add__more { padding: 0 12px 10px 44px; }
.hr-add__more .hr-dim { max-width: 220px; }
.hr-add__q { margin: 0 0 6px; color: var(--sub); font-size: 13.5px; font-weight: 600; }
.hr-step { display: inline-flex; align-items: center; gap: 4px; }
.hr-step__b { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg); font-size: 20px; line-height: 1; }
.hr-step__b:disabled { opacity: .4; cursor: default; }
.hr-step__n { min-width: 72px; text-align: center; font-weight: 700; }
.hr-calc__sum { margin-top: 14px; padding: 12px 14px; border-radius: 16px; background: var(--tint); border: 1px solid var(--line); transition: opacity .2s; }
.hr-calc__sum.is-busy { opacity: .6; }
.hr-sum__r { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 3px 0; font-size: 15px; }
.hr-sum__r span:last-child { flex: none; font-weight: 650; font-variant-numeric: tabular-nums; }
.hr-sum__r.is-muted { color: var(--sub); font-size: 14px; }
.hr-sum__r.is-tot { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--line); font-weight: 700; }
.hr-sum__r.is-tot span:last-child { font: 800 26px/1 var(--display); letter-spacing: -.02em; }
.hr-calc__est { margin: 8px 0 0; color: var(--hm-ink); font-size: 13px; font-weight: 650; }
.hr-calc__wait { margin: 0; color: var(--sub); font-size: 14px; }
.hr-calc + .hr-job__else { margin: 10px 0 -6px; }

/* ── Bids or Book Now (lane BB2): the price card's two choices. The lead is first and only a stronger outline; neither
   is ever drawn as picked (2026-10-21), and both buttons look the same. ── */
.hr-shell[data-card="on"] .hr-job { grid-template-columns: 64px minmax(0, 1fr); padding: 10px 12px; }
.hr-shell[data-card="on"] .hr-job__art { width: 64px; height: 64px; }
.hr-job__p small { font: 600 13px/1.2 var(--text); color: var(--sub); letter-spacing: 0; margin-left: 6px; }
.hr-job__est { margin: 3px 0 0; font-size: 12.5px; color: var(--sub); font-weight: 600; }
.hr-picks { display: grid; gap: 10px; margin-top: 12px; }
.hr-pick { padding: 12px 14px 14px; border-radius: 18px; border: 1px solid var(--line); background: var(--bg); }
.hr-pick--lead { border: 2px solid color-mix(in srgb, var(--hm) 60%, transparent); padding: 11px 13px 13px; }
.hr-pick__h { margin: 0; font: 700 17px/1.25 var(--display); }
.hr-pick__k { margin: 8px 0 0; font: 650 11.5px/1.2 var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--hm-ink); }
.hr-pick__r { margin: 2px 0 0; font-weight: 700; font-size: 15.5px; }
.hr-pick__p { margin: 6px 0 0; color: var(--sub); font-size: 13.5px; line-height: 1.4; }
.hr-pick .hr-go { width: 100%; margin-top: 10px; min-height: 50px; font-size: 16px; }
.hr-shell[data-card="on"][data-step="1"]:not([data-mode="list"]) .hr-dock__row { display: none; }
.hr-shell[data-card="on"][data-step="1"]:not([data-mode="list"]) .hr-trust { margin-top: 0; }
/* a phone: the job card stays short so both choices come up sooner (the card's middle scrolls for the rest) */
@media (max-width: 959.98px) {
  .hr-shell[data-card="on"] .hr-s[data-s="1"] > .hr-k { display: none; }
  .hr-shell[data-card="on"] .hr-job__inc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding-top: 8px; }
  .hr-shell[data-card="on"] .hr-job__inc b { display: inline; margin-right: 4px; }
  .hr-pick { padding: 10px 12px 12px; }
  .hr-pick--lead { padding: 9px 11px 11px; }
  .hr-pick .hr-go { margin-top: 8px; }
}
/* the price needs the place: step 2's address search on the card (hire.js moves #addr-box here) */
.hr-postal .hr-label { margin-top: 8px; }
/* step 2, the address already picked on the first screen: the address and Change */
.hr-addr-done { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0 0; padding: 4px 4px 4px 14px;
  border-radius: 14px; border: 1.5px solid var(--line); font-weight: 600; font-size: 15px; }
.hr-addr-done .hr-link { flex: none; padding: 0 10px; }
.hr-where1 > .hr-label:first-child { margin-top: 0; }
.hr-where1 .hr-addr-done { margin-top: 0; }
.hr-where1 .hr-two { margin-top: 0; }
.hr-ans__list li .hr-ans__ch { margin-left: auto; min-height: 0; font-size: 14px; }

/* the photo screen */
.hr-drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 150px;
  padding: 18px; border-radius: 18px; border: 2px dashed color-mix(in srgb, var(--g) 55%, var(--line)); background: var(--tint); text-align: center; cursor: pointer; }
.hr-drop.is-over { border-color: var(--g); background: var(--g-soft); }
.hr-drop svg { width: 34px; height: 34px; fill: none; stroke: var(--gd); stroke-width: 1.7; stroke-linejoin: round; }
.hr-drop b { font-size: 15.5px; }
.hr-drop__or { color: var(--sub); font-size: 13.5px; }
.hr-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.hr-drop:focus-within { outline: 3px solid var(--g); outline-offset: 2px; }
@media (hover: none) { .hr-drop__or { display: none; } }
.hr-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.hr-thumbs:empty { display: none; }
.hr-thumb { position: relative; width: 76px; height: 76px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: var(--tint) center / cover no-repeat; }
.hr-thumb button { position: absolute; top: 0; right: 0; width: 44px; height: 44px; display: flex; align-items: flex-start; justify-content: flex-end; padding: 4px;
  border: 0; background: none; }
.hr-thumb button span { display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; border-radius: 50%; background: rgb(0 0 0 / .6); color: #fff; font-size: 15px; line-height: 1; }
.hr-skip { display: block; margin: 6px auto 0; }

/* the all-set screen's email and Text me updates */
.hr-email { margin-top: 16px; }
.hr-email__row { display: flex; gap: 8px; }
.hr-email__row .hr-field { flex: 1; min-width: 0; }
.hr-email__go { flex: none; min-width: 76px; min-height: 52px; padding: 0 16px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--bg); font-weight: 700; }
.hr-textme { margin-top: 16px; }
.hr-textme__p { margin: 0; color: var(--hm-ink); background: var(--hm-soft); border-radius: 12px; padding: 10px 12px; font-size: 14.5px; }
.hr-qr { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.hr-qr__code { flex: none; width: 132px; height: 132px; border-radius: 12px; overflow: hidden; background: #fff; border: 1px solid var(--line); }
.hr-qr__code svg { display: block; width: 100%; height: 100%; }
.hr-qr p { margin: 0; color: var(--sub); font-size: 13.5px; }
.hr-textme__mac { display: inline-flex; align-items: center; margin-top: 4px; }
.hr-go2 { display: flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 8px; border-radius: 14px; border: 1.5px solid var(--line);
  background: var(--bg); color: var(--ink); font: 700 16px/1.2 var(--text); text-decoration: none; }
.hr-go2:focus-visible { outline: 3px solid var(--g); outline-offset: 2px; }

/* not open here */
.hr-list { margin: 0 0 14px; padding: 12px 14px; border-radius: 14px; background: var(--wait-soft); color: var(--ink); }
.hr-list__h { margin: 0; font-weight: 700; color: var(--wait); }
.hr-list__p { margin: 4px 0 0; font-size: 14px; }

/* fields */
.hr-field { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 14px; border-radius: 14px; border: 1.5px solid var(--line);
  background: var(--bg); }
.hr-field:focus-within { border-color: var(--g); }
.hr-field input { flex: 1; min-width: 0; height: 50px; border: 0; outline: 0; background: transparent; font-size: 17px; }
.hr-field svg { width: 20px; height: 20px; fill: none; stroke: var(--sub); stroke-width: 1.8; }
.hr-field--code input { font: 700 26px/1 ui-monospace, Menlo, monospace; letter-spacing: .4em; text-align: center; }
.hr-cands { display: grid; gap: 6px; margin-top: 6px; }
.hr-cand { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--bg); text-align: left; }
.hr-cand small { display: block; color: var(--sub); font-size: 13px; }
.hr-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hr-opt { min-height: 52px; padding: 8px 12px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--bg); font-weight: 650; font-size: 15.5px; }
.hr-opt span { display: block; font-weight: 500; color: var(--sub); font-size: 13.5px; }
.hr-opt[aria-pressed="true"] { border-color: var(--g); background: var(--g-soft); box-shadow: inset 0 0 0 1px var(--g); }
.hr-price-line { margin: 14px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--tint); font-weight: 650; }

/* windows */
.hr-wins { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hr-wins__d { grid-column: 1 / -1; margin: 6px 0 -2px; font: 650 13px/1.2 var(--text); color: var(--sub); letter-spacing: .04em; text-transform: uppercase; }
.hr-wins__d:first-child { margin-top: 0; }
.hr-wins .hr-opt--wide { grid-column: 1 / -1; }
.hr-other { margin-top: 4px; }
.hr-other .hr-two { margin-top: 10px; }

/* the preferred time (lane PT2, redrawn by HT-1): two light quick picks (ASAP starts picked), a row of day chips and
   three time-of-day pills, every one saying what it is; picked = green fill and a tick. No empty boxes, no grid. */
.hr-pref__h { margin: 0 0 12px; }
.hr-tick { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; display: none; }
[aria-pressed="true"] > .hr-tick { display: block; }
.hr-pref__quick { display: flex; flex-wrap: wrap; gap: 8px; }
.hr-qp { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 1 1 0; min-width: max-content; min-height: 44px;
  padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--bg); color: var(--ink); font: 650 14.5px/1.1 var(--text); }
.hr-qp b { font-weight: 650; white-space: nowrap; }
/* HT-1b: two labelled rows that can't be mistaken for each other. Days are calendar pages (weekday on a band, the date
   big, green when picked); times are wider pills with a violet sun, moon or clock and the hours. */
.hr-pref__lbl { display: flex; align-items: baseline; gap: 8px; margin: 14px 0 6px; font: 700 11.5px/1.2 var(--text); letter-spacing: .08em;
  text-transform: uppercase; color: var(--sub); }
.hr-pref__lbl span { letter-spacing: 0; text-transform: none; font-weight: 650; font-size: 13px; color: var(--hm-ink); }
.hr-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.hr-day { position: relative; display: flex; flex-direction: column; min-height: 52px; padding: 0; border-radius: 10px; border: 1.5px solid var(--line);
  background: var(--bg); color: var(--ink); overflow: visible; }
.hr-day__w { display: block; padding: 3px 0 2px; border-radius: 8.5px 8.5px 0 0; background: var(--tint); border-bottom: 1px solid var(--line);
  font: 700 10.5px/1.2 var(--text); letter-spacing: .05em; text-transform: uppercase; color: var(--sub); white-space: nowrap; }
.hr-day__n { flex: 1; display: grid; place-items: center; padding: 3px 0 4px; font: 700 19px/1 var(--display); color: var(--ink); }
.hr-day[aria-pressed="true"] .hr-day__w { background: var(--go); border-bottom-color: var(--go); color: var(--go-ink); }
.hr-day .hr-tick, .hr-tod .hr-tick { position: absolute; top: -6px; right: -5px; width: 18px; height: 18px; padding: 3px; border-radius: 50%;
  background: var(--go); color: var(--go-ink); stroke-width: 3.6; }
.hr-parts { display: flex; gap: 6px; border-radius: 18px; }
.hr-tod { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 58px; padding: 5px 4px; border-radius: 16px; border: 1.5px solid var(--line); background: var(--bg); color: var(--ink); }
.hr-tod__i { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--hm); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hr-tod__x { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.hr-tod b { font: 650 13.5px/1.15 var(--text); white-space: nowrap; }
.hr-tod span span, .hr-tod > span:not(.hr-tod__x) { font: 500 12px/1.2 var(--text); color: var(--sub); white-space: nowrap; }
.hr-parts.is-wait { outline: 2px dashed color-mix(in srgb, var(--hm) 55%, transparent); outline-offset: 4px; }
.hr-parts.is-nudge { animation: hr-nudge 1.4s ease-out 1; }
@keyframes hr-nudge { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--hm) 45%, transparent); } 100% { box-shadow: 0 0 0 14px transparent; } }
@media (prefers-reduced-motion: reduce) { .hr-parts.is-nudge { animation: none; } }
@media (min-width: 600px) {
  .hr-tod { flex-direction: row; justify-content: flex-start; gap: 8px; min-height: 52px; padding: 6px 12px; text-align: left; }
  .hr-tod__x { align-items: flex-start; }
  .hr-tod__i { width: 20px; height: 20px; }
}
.hr-qp[aria-pressed="true"], .hr-day[aria-pressed="true"], .hr-tod[aria-pressed="true"] { border-color: var(--g); background: var(--g-soft);
  box-shadow: inset 0 0 0 1px var(--g); color: var(--g-ink); }
:root[color-scheme="dark"] :is(.hr-qp, .hr-day, .hr-tod)[aria-pressed="true"] { color: var(--ink); }
.hr-qp[aria-pressed="true"] .hr-tick { color: var(--gd); }
.hr-tod[aria-pressed="true"] span span { color: inherit; }
:is(.hr-qp, .hr-day, .hr-tod):focus-visible { outline: 3px solid color-mix(in srgb, var(--g) 55%, transparent); outline-offset: 2px; }
@media (hover: hover) { :is(.hr-qp, .hr-day, .hr-tod):not([aria-pressed="true"]):hover { border-color: color-mix(in srgb, var(--g) 60%, var(--line)); } }
.hr-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.hr-chip { min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--g); background: var(--g-soft); font-weight: 650; font-size: 14px; }
.hr-chip span { margin-left: 4px; color: var(--sub); font-size: 17px; }
.hr-pref__links { margin-top: 4px; gap: 0 18px; }
.hr-pref__links .hr-link { min-height: 40px; font-size: 14.5px; }
.hr-pref .hr-link--sos { min-height: 36px; }
.hr-pref__by .hr-note .hr-link { min-height: 0; font-size: 14px; }
.hr-shell[data-when="pref"][data-step="3"] .hr-trust b { color: var(--g-ink); }
:root[color-scheme="dark"] .hr-shell[data-when="pref"][data-step="3"] .hr-trust b { color: var(--gd); }
@media (max-width: 380px) { .hr-day__w { font-size: 9.5px; letter-spacing: .02em; } .hr-qp { padding: 0 10px; font-size: 14px; } }
/* the time, after the step: never a tick, a dashed violet clock (call 4) */
.hr-track li.is-pref::before, .hr-ans__list li.is-pref::before { border: 2px dashed var(--hm); background: var(--hm-soft)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b55cf' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center / 13px no-repeat; }
:root[color-scheme="dark"] :is(.hr-track, .hr-ans__list) li.is-pref::before { background-image:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239d8cff' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.hr-track li.is-pref b { display: block; color: var(--hm-ink); font-weight: 650; }
.hr-track li.is-pref span { display: block; margin-top: 2px; color: var(--sub); font-size: 14px; }
.hr-ans__list li.is-pref { color: var(--hm-ink); font-weight: 600; }

/* the code */
.hr-links { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; }
.hr-link { min-height: 44px; padding: 0; border: 0; background: none; color: var(--gd); font-weight: 650; font-size: 15px; text-decoration: underline; text-underline-offset: 3px; }

/* booked */
.hr-h2--done { font-size: 23px; }
.hr-track { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; }
.hr-track li { position: relative; padding: 2px 0 2px 32px; font-size: 15.5px; }
.hr-track li::before { content: ''; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line); }
.hr-track li.is-done::before { border-color: var(--g); background: var(--g) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 14px no-repeat; }
.hr-track li.is-on::before { border-color: var(--g); border-right-color: transparent; animation: hr-spin .9s linear infinite; }
.hr-track li b { font-weight: 700; }
.hr-track + .hr-note { margin-top: 16px; }

/* ── a computer: the ad on the left, the card on the right, the page fits the window ── */
@media (min-width: 960px) {
  .hr-top { padding-top: 10px; }
  .hr-logo img { height: 52px; }
  .hr-main { flex-direction: row; gap: 40px; align-items: stretch; padding-top: 12px; padding-bottom: 24px; }
  .hr-intro { flex: 1 1 0; min-width: 0; min-height: 0; display: flex; flex-direction: column; padding-top: 16px; }
  .hr-h1 { font-size: clamp(34px, 3.4vw, 46px); max-width: 19ch; }
  .hr-sub { margin-top: 14px; font-size: 18px; max-width: 46ch; }
  .hr-hero { flex: 0 1 auto; min-height: 0; margin-top: 22px; border-radius: 24px; overflow: hidden; background: var(--g-soft); max-height: 360px; max-width: 560px; }
  .hr-hero img { display: block; width: 100%; height: 100%; object-fit: cover; }
  /* the moving picture (lane H3): the loop plays over its still, faded in once it is really playing */
  .hr-hero { position: relative; }
  .hr-hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s ease; }
  .hr-hero video.is-on { opacity: 1; }
  .hr-proof--wide { display: block; flex: none; margin-top: 20px; max-width: 560px; }
  .hr-proof--phone { display: none; }
  .hr-card { flex: 0 0 440px; max-height: 760px; align-self: center; height: 100%; }
  .hr-body { padding: 22px 22px 10px; }
  .hr-dock { padding: 12px 22px 16px; }
}

/* ── the cookie card (consent.js draws it where the law asks): on a phone the frame gives up its room on the first screen,
   so the button stays in view; from the address on, the card steps aside (html.hm-consent-form) ── */
@media (max-width: 959.98px) {
  html.hm-consent-open:not(.hm-consent-form) .hr-shell { height: calc(100vh - var(--hm-consent-h, 0px)); height: calc(100dvh - var(--hm-consent-h, 0px)); }
}

/* ── the popups: the answer deck (the founder, 2026-10-16), violet, one question, the job's own picture big, full-width
   choices that each say what they do, Undo last at the foot. Never a choice drawn as already picked (2026-10-21): the
   lead one is a stronger outline and a violet chevron, nothing more. A sheet from the foot on a phone (only its rows
   scroll), a card in the middle on a computer. ── */
html.hr-deck-open, html.hr-deck-open body { overflow: hidden; }
.hr-deck { position: fixed; inset: 0; z-index: 10010; display: flex; align-items: flex-end; justify-content: center; }
.hr-deck__scrim { position: absolute; inset: 0; background: rgb(20 16 40 / .42); opacity: 0; transition: opacity .2s ease; }
.hr-deck.is-in .hr-deck__scrim { opacity: 1; }
.hr-deck__card { position: relative; width: 100%; max-height: calc(100dvh - 24px - env(safe-area-inset-top)); display: flex; flex-direction: column; gap: 10px;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0; outline: 0;
  background: color-mix(in srgb, var(--hm-soft) 70%, var(--bg)); border: 1px solid color-mix(in srgb, var(--hm) 22%, transparent); border-bottom: 0;
  box-shadow: 0 -18px 50px rgb(40 30 90 / .22); transform: translateY(24px); opacity: 0; transition: transform .28s cubic-bezier(.2, .8, .2, 1), opacity .2s ease; }
.hr-deck.is-in .hr-deck__card { transform: none; opacity: 1; }
.hr-deck__head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: -4px; }
.hr-deck__eye { margin: 0; font: 650 11.5px/1.2 ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--hm-ink); }
.hr-deck__x { flex: none; width: 44px; height: 44px; margin: -8px -10px -8px 0; display: inline-flex; align-items: center; justify-content: center; border: 0;
  border-radius: 50%; background: none; color: var(--hm-ink); }
.hr-deck__x svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.hr-deck__q { flex: none; margin: 0; font: 700 21px/1.2 var(--display); letter-spacing: -.01em; color: var(--ink); }
.hr-deck__d { flex: none; margin: -4px 0 0; color: var(--sub); font-size: 14px; line-height: 1.4; }
.hr-deck__pic { position: relative; flex: none; margin: 0; height: clamp(96px, 19dvh, 200px); border-radius: 18px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--hm) 15%, transparent); background: var(--bg); }
.hr-deck[data-kind="home"] .hr-deck__pic { height: clamp(150px, 32dvh, 280px); }
.hr-deck__pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hr-deck__pic figcaption { position: absolute; left: 8px; bottom: 8px; max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 4px 8px; border-radius: 9px; background: color-mix(in srgb, var(--bg) 90%, transparent); color: var(--ink); font-size: 12.5px; font-weight: 650;
  box-shadow: 0 1px 3px rgb(0 0 0 / .12); }
.hr-deck__pic figcaption:empty { display: none; }
.hr-deck__rows { flex: 0 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 8px;
  margin: 0 -4px; padding: 2px 4px; }
.hr-row { flex: none; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 9px 14px; border-radius: 16px; text-align: left;
  background: color-mix(in srgb, var(--bg) 88%, transparent); border: 1px solid color-mix(in srgb, var(--hm) 20%, transparent); color: var(--ink);
  transition: background-color .15s ease; }
.hr-row:hover { background: var(--hm-soft); }
.hr-row--lead { background: var(--bg); border: 2px solid color-mix(in srgb, var(--hm) 60%, transparent); padding: 8px 13px; }
.hr-row:focus-visible { outline: 3px solid var(--hm); outline-offset: 2px; }
.hr-row__pic { flex: none; width: 46px; height: 46px; margin-left: -6px; border-radius: 12px; background: var(--tint) center / cover no-repeat;
  border: 1px solid var(--line); }
.hr-row__pic--find { display: inline-flex; align-items: center; justify-content: center; background: var(--hm-soft); border-color: color-mix(in srgb, var(--hm) 25%, transparent); }
.hr-row__pic--find svg { width: 22px; height: 22px; fill: none; stroke: var(--hm); stroke-width: 2.2; stroke-linecap: round; }
.hr-row__x { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hr-row__x b { font-size: 15.5px; line-height: 1.25; font-weight: 700; }
.hr-row__x span { color: var(--sub); font-size: 13px; line-height: 1.3; }
.hr-row > svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: .55; }
.hr-row--lead > svg { stroke: var(--hm); opacity: 1; }
.hr-deck .hr-search { flex: none; margin-top: 0; }
.hr-deck .hr-hits { max-height: 30dvh; overflow: auto; }
.hr-deck__foot { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--hm) 15%, transparent); }
.hr-deck__undo, .hr-deck__keep { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; padding: 0 4px; border: 0; background: none;
  color: var(--hm-ink); font: 700 15px/1.2 var(--text); }
.hr-deck__keep { margin-left: auto; padding: 0 16px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--hm) 30%, transparent); background: var(--bg); }
.hr-deck__undo svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hr-deck__undo:focus-visible, .hr-deck__keep:focus-visible, .hr-deck__x:focus-visible { outline: 3px solid var(--hm); outline-offset: 2px; }
@media (min-width: 640px) {
  .hr-deck { align-items: center; padding: 24px; }
  .hr-deck__card { max-width: 480px; max-height: min(780px, calc(100dvh - 48px)); padding: 18px 20px 18px; border-radius: 24px; border-bottom: 1px solid color-mix(in srgb, var(--hm) 22%, transparent);
    box-shadow: 0 30px 80px rgb(40 30 90 / .28); }
  .hr-deck__pic { height: 190px; }
  .hr-deck[data-kind="home"] .hr-deck__pic { height: 240px; }
}
@media (prefers-reduced-motion: reduce) { .hr-deck__card, .hr-deck__scrim { transition: none; } }

/* ── lane EG2: "Is this an emergency?" and the written guide, in the same violet card. The guide's own words only: the
   danger line red under the title, the moving picture with "Watch the steps", numbered steps, the shut-off spot, the
   Google link ("not checked by Handyman"), Call 911, the way on, the disclaimer. Only the card's middle scrolls. ── */
.hr-opt.hr-opt--lead:not([aria-pressed="true"]) { border: 2px solid color-mix(in srgb, var(--hm) 70%, transparent); padding: 7px 11px; }
.hr-link--sos { display: inline-flex; align-items: center; margin-top: 2px; color: var(--stop); }
.hr-deck__aside { margin: 0 0 0 auto; color: var(--sub); font-size: 13px; line-height: 1.3; text-align: right; }
.hr-deck[data-kind="guide"] .hr-deck__d { margin: -2px 0 0; color: var(--stop); font-weight: 700; font-size: 14.5px; }
.hr-deck[data-kind="guide"] .hr-deck__rows { gap: 0; }
.hr-eg { display: flex; flex-direction: column; gap: 10px; padding-bottom: 2px; }
.hr-eg__pic { position: relative; margin: 0; aspect-ratio: 3 / 2; max-height: 30dvh; border-radius: 16px; overflow: hidden; background: var(--bg);
  border: 1px solid color-mix(in srgb, var(--hm) 15%, transparent); }
.hr-eg__pic img, .hr-eg__pic video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hr-eg__pic video { opacity: 0; transition: opacity .3s ease; }
.hr-eg__pic video.is-on { opacity: 1; }
.hr-eg__watch { position: absolute; left: 8px; bottom: 8px; min-height: 44px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px;
  border-radius: 12px; background: color-mix(in srgb, var(--bg) 92%, transparent); color: var(--hm-ink); font-weight: 700; font-size: 14px;
  text-decoration: none; box-shadow: 0 1px 4px rgb(0 0 0 / .16); }
.hr-eg__watch svg { width: 16px; height: 16px; fill: currentColor; }
.hr-eg__watch:focus-visible { outline: 3px solid var(--hm); outline-offset: 2px; }
.hr-eg__lead, .hr-eg__after { margin: 0; color: var(--ink); font-size: 15px; line-height: 1.4; }
.hr-eg__after { padding: 10px 12px; border-radius: 14px; background: var(--bg); border: 1px solid color-mix(in srgb, var(--hm) 20%, transparent); font-weight: 600; }
.hr-eg__steps { margin: 0; padding: 0; list-style: none; counter-reset: eg; display: flex; flex-direction: column; gap: 8px; }
.hr-eg__steps > li { counter-increment: eg; position: relative; padding: 0 0 0 34px; font-size: 15px; line-height: 1.38; }
.hr-eg__steps > li::before { content: counter(eg); position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; background: var(--hm); color: #fff; font: 700 13px/1 var(--text); }
:root[color-scheme="dark"] .hr-eg__steps > li::before { color: #14102b; }
.hr-eg__steps > li > b { display: block; font-weight: 700; }
.hr-eg__steps > li > span { display: block; margin-top: 2px; color: var(--sub); font-size: 14px; }
.hr-eg__place { margin-top: 6px; padding: 9px 12px; border-radius: 14px; background: var(--bg); border: 1px solid color-mix(in srgb, var(--hm) 22%, transparent); }
.hr-eg__place.is-saved { border: 2px solid color-mix(in srgb, var(--hm) 60%, transparent); }
.hr-eg__pk { margin: 0 0 4px; font: 650 12px/1.2 ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--hm-ink); }
.hr-eg__pw { margin: 0; font-weight: 650; }
.hr-eg__place ul { margin: 0; padding: 0 0 0 18px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.hr-eg__pn { margin: 6px 0 0; color: var(--sub); font-size: 13.5px; }
.hr-eg__wl { margin: 0; }
.hr-eg .hr-link { color: var(--hm-ink); }
.hr-eg__we { margin: 0; }
.hr-eg__acts { display: flex; flex-direction: column; gap: 8px; }
.hr-eg .hr-row { text-decoration: none; }
.hr-row--find .hr-row__x span { font-size: 12.5px; }
.hr-row--sos { border: 2px solid color-mix(in srgb, var(--stop) 55%, transparent); padding: 8px 13px; text-decoration: none; }
.hr-row--sos .hr-row__x b { color: var(--stop); }
.hr-eg__fine { margin: 2px 0 0; color: var(--sub); font-size: 12.5px; line-height: 1.4; }
@media (prefers-reduced-motion: reduce) { .hr-eg__pic video { display: none; } }

/* ── layout B, split screen (the founder, 2026-10-25: "approved as recommended"). A preview behind ?layout=split
   (html.hr-split, set in the page's head) until it is switched on for everyone; nothing here touches the old layout.
   A computer: a full-height green panel on the left (step 1 the headline, the picture and the stats as one slim line;
   from step 2 the job, the picture, the price, trust and the answers so far), the step card centred on the right, as
   tall as its content, Back and Next right under the last field; a step taller than the window scrolls in the card
   only. "Step 2 of 5 · Your address" at 16px bold over a segmented bar. A phone: a slim job header on a green tint from
   step 2, the headline on step 1 only, the pinned button as before. ── */
.hr-prog, .hr-jh, .hr-ans { display: none; }
html.hr-split .hr-count { display: none; }
html.hr-split .hr-prog { display: block; flex: none; padding: 14px 16px 0; }
.hr-prog__t { margin: 0; font: 700 16px/1.25 var(--text); color: var(--ink); }
.hr-prog__bar { display: flex; gap: 5px; margin-top: 8px; }
.hr-prog__bar span { flex: 1 1 0; height: 6px; border-radius: 3px; background: var(--line); }
.hr-prog__bar span.on { background: var(--g); }
html.hr-split .hr-body { padding-top: 14px; }
.hr-jh__art { display: block; width: 60px; height: 60px; border-radius: 12px; background: #fff center / cover no-repeat; border: 1px solid var(--line); }
.hr-jh__k { margin: 0; font: 650 12px/1.2 var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--gd); }
.hr-jh__t { margin: 0; font: 700 15px/1.25 var(--display); }
.hr-jh__p, .hr-ans__p { margin: 3px 0 0; font: 800 19px/1.1 var(--display); letter-spacing: -.02em; }
.hr-jh__p small, .hr-ans__p small { margin-left: 6px; font: 600 12.5px/1.2 var(--text); letter-spacing: 0; color: var(--sub); }
.hr-jh__p.is-q, .hr-ans__p.is-q { color: var(--gd); }
@media (max-width: 959.98px) {
  html.hr-split .hr-shell:not([data-step="1"]) .hr-h1 { display: none; }
  html.hr-split .hr-shell:not([data-step="1"]) .hr-jh { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 12px; align-items: center;
    margin-top: 2px; padding: 8px 12px 8px 8px; border-radius: 16px; background: var(--g-soft); }
  .hr-jh__k { display: none; }
  .hr-jh__t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  html.hr-split .hr-prog { padding-top: 12px; }
  html.hr-split .hr-body { padding-top: 12px; }
}
@media (min-width: 960px) {
  html.hr-split .hr-shell { position: relative; }
  html.hr-split .hr-top { position: absolute; z-index: 2; top: 0; left: 0; right: 0; max-width: none; padding: 20px clamp(32px, 4.4vw, 64px) 0;
    pointer-events: none; }
  html.hr-split .hr-top > * { pointer-events: auto; }
  html.hr-split .hr-main { max-width: none; gap: 0; padding: 0 24px 0 0; }
  html.hr-split .hr-intro { flex: 0 0 clamp(420px, 44vw, 820px); margin-right: 24px; justify-content: center; overflow: hidden;
    padding: 100px clamp(32px, 4.4vw, 64px) 32px; background: var(--g-soft); }
  html.hr-split .hr-intro > * { width: 100%; max-width: 560px; }
  html.hr-split .hr-h1 { margin-top: 0; }
  html.hr-split .hr-hero { flex: none; height: 300px; max-height: none; max-width: 560px; margin-top: 24px; background: var(--bg);
    border: 1px solid var(--line); }
  html.hr-split .hr-shell:not([data-step="1"]) .hr-hero { height: 260px; margin-top: 20px; }
  html.hr-split .hr-shell:not([data-step="1"]) :is(.hr-h1, .hr-sub, .hr-proof--wide) { display: none; }
  html.hr-split .hr-shell:not([data-step="1"]) .hr-jh { display: block; }
  html.hr-split .hr-shell:not([data-step="1"]) .hr-ans { display: block; }
  .hr-jh__art, .hr-jh__p { display: none; }
  .hr-jh__t { margin-top: 10px; font-size: clamp(26px, 2.3vw, 32px); line-height: 1.15; letter-spacing: -.015em; text-wrap: balance; }
  .hr-ans__p { margin-top: 20px; font-size: 36px; line-height: 1; }
  .hr-ans__p small { font-size: 15px; margin-left: 8px; }
  .hr-ans__p.is-q { font-size: 28px; }
  .hr-ans__trust { margin: 8px 0 0; color: var(--sub); font-size: 15px; }
  .hr-ans__list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 9px; }
  .hr-ans__list li { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--faint); font-size: 15px; line-height: 1.3; }
  .hr-ans__list li::before { content: ''; flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--sub) 35%, transparent); }
  .hr-ans__list li.is-done { color: var(--ink); font-weight: 600; }
  .hr-ans__list li.is-done::before { border-color: var(--g); background: var(--g) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 13px no-repeat; }
  /* the stats on step 1 only, as one slim line under the picture (no tiles) */
  html.hr-split .hr-proof--wide { margin-top: 18px; }
  html.hr-split .hr-proof--wide .hm-proof { display: flex; flex-wrap: wrap; gap: 4px 18px; }
  html.hr-split .hr-proof--wide .hm-proof__t { display: flex; flex-direction: row; align-items: baseline; gap: 0; padding: 0; border: 0; border-radius: 0;
    background: none; overflow: visible; }
  html.hr-split .hr-proof--wide .hm-proof__t::after, html.hr-split .hr-proof--wide .hm-proof__i { display: none; }
  html.hr-split .hr-proof--wide .hm-proof__x { display: flex; flex-direction: row; align-items: baseline; gap: 5px; }
  html.hr-split .hr-proof--wide .hm-proof__n { font-size: 15px; }
  html.hr-split .hr-proof--wide .hm-proof__l { margin: 0; font-size: 14px; white-space: nowrap; }
  /* the card: centred in the room on the right, as tall as its step; past the window only its middle scrolls */
  html.hr-split .hr-card { flex: 0 1 520px; width: 520px; height: auto; max-height: calc(100vh - 140px); max-height: calc(100dvh - 140px);
    margin: 0 auto; align-self: center; }
  html.hr-split .hr-prog { padding: 22px 24px 0; }
  html.hr-split .hr-body { flex: 0 1 auto; padding: 18px 24px 6px; }
  html.hr-split .hr-dock { padding: 10px 24px 20px; border-top: 1px solid transparent; }
}
/* short laptops (1280×720): a smaller picture, the panel still fits */
@media (min-width: 960px) and (max-height: 820px) {
  html.hr-split .hr-intro { padding-top: 88px; }
  html.hr-split .hr-h1 { font-size: clamp(30px, 2.9vw, 38px); }
  html.hr-split .hr-sub { margin-top: 10px; font-size: 16.5px; }
  html.hr-split .hr-hero { height: 210px; margin-top: 18px; }
  html.hr-split .hr-shell:not([data-step="1"]) .hr-hero { height: 180px; margin-top: 16px; }
  .hr-jh__t { font-size: clamp(24px, 2vw, 28px); }
  .hr-ans__p { margin-top: 14px; font-size: 30px; }
  .hr-ans__list { margin-top: 12px; gap: 6px; }
  html.hr-split .hr-card { max-height: calc(100vh - 120px); max-height: calc(100dvh - 120px); }
}
@media (min-width: 960px) and (max-height: 680px) {
  html.hr-split .hr-hero { height: 150px; }
  html.hr-split .hr-shell:not([data-step="1"]) .hr-hero { height: 130px; }
}

/* ── the /hire revamp (lane H-M, approved 2026-10-26): the rungs (a trade's things, a thing's jobs), WeReno up front,
   the house at the address, the email that saves as you type. The drawings' own colours are art.css (the face kit's). */
.hr-crumb { grid-column: 1 / -1; display: flex; align-items: center; gap: 4px; min-width: 0; margin: 0 0 6px;
  font: 650 12.5px/1.3 var(--text); color: var(--sub); }
.hr-crumb__w { min-width: 0; }
.hr-crumb__at { color: var(--faint); font-weight: 600; }
.hr-crumb__back { flex: none; width: 44px; height: 44px; margin: -10px 0 -10px -12px; display: inline-flex; align-items: center;
  justify-content: center; border: 0; border-radius: 12px; background: none; color: var(--ink); }
.hr-crumb__back svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hr-crumb__back:focus-visible { outline: 3px solid var(--hm); outline-offset: 2px; }
.hr-job .hr-rung__q { font-size: 20px; }
.hr-things { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
@media (min-width: 520px) { .hr-things { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hr-thing { display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 0; min-height: 44px; padding: 7px 7px 9px;
  border-radius: 16px; border: 1px solid color-mix(in srgb, var(--hm) 22%, var(--line)); background: var(--bg); color: var(--ink);
  text-align: center; transition: background-color .15s ease, transform .12s; }
.hr-thing:hover { background: var(--hm-soft); }
/* a touch screen keeps :hover on whatever lands under the finger after a redraw: never let that look picked */
@media (hover: none) { .hr-thing:hover, .hr-row--job:hover { background: var(--bg); } }
.hr-thing:active { transform: scale(.985); }
.hr-thing:focus-visible { outline: 3px solid var(--hm); outline-offset: 2px; }
.hr-thing--lead { border: 2px solid color-mix(in srgb, var(--hm) 60%, transparent); padding: 6px 6px 8px; }
.hr-thing.is-busy, .hr-row.is-busy { opacity: .6; }
.hr-thing__art { display: block; aspect-ratio: 4 / 3; border-radius: 11px; overflow: hidden; background: var(--tint); }
.hr-thing__art svg { display: block; width: 100%; height: 100%; }
/* lane RM-1: a thing's moving picture (its still first, the loop fading in over it), never a face */
.hr-pic { position: relative; display: block; width: 100%; height: 100%; background: var(--tint) center / cover no-repeat; }
.hr-pic video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .25s ease; }
.hr-pic video.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hr-pic video { display: none; } }
.hr-thing__t { font-weight: 700; font-size: 14.5px; line-height: 1.25; overflow-wrap: anywhere; }
/* What Needs Fixing, Every Trade (HG-2): one 3×3 at every width (the founder: "keep the grid 3x3"), each tile its picture,
   its name, three problem words and, only with a real price, "From $X" on the picture; the ninth "More <trade>" */
.hr-things { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.hr-things .hr-thing { gap: 3px; padding: 4px 4px 6px; border-radius: 14px; justify-content: flex-start; }
.hr-things .hr-thing--lead { padding: 3px 3px 5px; }
.hr-things .hr-thing__art { position: relative; aspect-ratio: auto; height: 46px; border-radius: 10px; }
.hr-things .hr-thing__t { font-size: 13px; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: break-word; }
.hr-thing__h { font: 600 12px/1.25 var(--text); color: var(--sub); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hr-thing__from { position: absolute; left: 4px; bottom: 4px; max-width: calc(100% - 8px); padding: 1px 7px; border-radius: 999px;
  font: 800 12px/1.35 var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: var(--g-soft); color: var(--ink); box-shadow: 0 0 0 1px color-mix(in srgb, var(--g) 45%, transparent); }
.hr-things.is-tight .hr-thing__h { -webkit-line-clamp: 1; }
.hr-thing--more { border-style: dashed; background: var(--card, var(--bg)); }
.hr-things .hr-thing--more .hr-thing__art { background: none; display: grid; place-items: center; }
.hr-thing__plus { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--hm-soft); color: var(--hm); }
.hr-thing__plus svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
@media (min-width: 900px) and (min-height: 760px) { .hr-things .hr-thing__art { height: 50px; } }
@media (max-width: 519px) {
  .hr-things { gap: 5px; }
  .hr-things .hr-thing { gap: 2px; padding: 3px 3px 5px; }
  .hr-things .hr-thing--lead { padding: 2px 2px 4px; }
  .hr-things .hr-thing__art { height: 34px; border-radius: 9px; }
  .hr-things .hr-thing__t { font-size: 12.5px; }
  .hr-thing__h { line-height: 1.2; }
  .hr-thing__plus { width: 28px; height: 28px; }
  .hr-job .hr-rung__q { font-size: 18px; }
  .hr-gq { min-height: 44px; margin-top: 6px; }
  .hr-gq input { font-size: 14px; }
}
@media (max-width: 430px) { .hr-thing__h3 { display: none; } .hr-things .hr-thing__art { height: 30px; }
  .hr-things { gap: 4px; } .hr-job .hr-gq + .hr-things { margin-top: 5px; } .hr-things .hr-thing { padding-bottom: 4px; } .hr-gq { margin-top: 4px; } .hr-things .hr-thing__t { line-height: 1.15; } }
/* the search line above the grid: their words go to the job that matches, else "Tell me in your words" */
.hr-gq { position: relative; display: flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 8px; padding: 0 4px 0 12px;
  border-radius: 13px; border: 1.5px solid var(--line); background: var(--bg); }
.hr-gq:focus-within { border-color: var(--g); }
.hr-gq__i { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--sub); stroke-width: 2.2; stroke-linecap: round; }
.hr-gq input { flex: 1; min-width: 0; height: 42px; border: 0; background: none; color: var(--ink); font: 600 15px/1.2 var(--text); outline: none; }
.hr-gq input::placeholder { color: var(--faint, var(--sub)); font-weight: 600; }
.hr-gq__go { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 11px; background: none; color: var(--hm); }
.hr-gq__go svg, .hr-gq__hit svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hr-gq__go:focus-visible, .hr-gq__hit:focus-visible { outline: 3px solid var(--hm); outline-offset: -3px; }
.hr-gq__hits { position: absolute; z-index: 8; left: -1.5px; right: -1.5px; top: calc(100% + 4px); display: flex; flex-direction: column; padding: 4px;
  border-radius: 13px; border: 1px solid var(--line); background: var(--card, var(--bg)); box-shadow: 0 10px 30px rgb(0 0 0 / .14); }
.hr-gq__hits[hidden] { display: none; }
.hr-gq__hit { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 0 10px; border: 0; border-radius: 10px;
  background: none; color: var(--ink); font: 700 14.5px/1.25 var(--text); text-align: left; }
.hr-gq__hit:hover { background: var(--hm-soft); }
.hr-gq__hit--tell { color: var(--gd, var(--hm)); font-weight: 650; }
.hr-job .hr-gq + .hr-things { margin-top: 8px; }
.hr-rung__h { display: flex; align-items: center; gap: 12px; }
.hr-rung__h .hr-rung__q { margin: 0; min-width: 0; }
.hr-thing__art--sm { flex: none; width: 76px; }
.hr-row__off { flex: none; max-width: 40%; text-align: right; font-weight: 800; font-size: 15px; line-height: 1.2; color: var(--ink);
  font-variant-numeric: tabular-nums; }
.hr-row__off.is-q { font-weight: 650; font-size: 13px; color: var(--gd); }
.hr-rung__at { font-size: 13px; }
/* WeReno's own price, first (stop 4) */
.hr-we__k { margin: 0; font: 650 12px/1.25 var(--text); letter-spacing: .06em; text-transform: uppercase; color: var(--hm-ink); }
.hr-we__p { margin: 4px 0 0; font: 800 34px/1 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.hr-we__two { display: grid; gap: 8px; margin-top: 10px; }
@media (min-width: 520px) { .hr-we__two { grid-template-columns: 1fr 1fr; } }
.hr-pick .hr-we__two .hr-go { margin-top: 0; font-size: 15.5px; padding: 0 12px; }
/* WR-1: who is bidding, as a pro's bid card says it: WeReno's wordmark and "Instant bid" on a soft band, then wereno.com
   (a new tab) and "Who is WeReno?" (its story, tools/who.py wr()) */
.hr-we__by { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 10px 0 2px; padding: 10px 12px 4px; border-radius: 14px;
  background: linear-gradient(120deg, color-mix(in srgb, #7ed957 13%, var(--bg)), var(--bg) 75%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #7ed957 35%, var(--line)); }
.hr-we__mark { display: inline-flex; }
.hr-we__mark .who-wm { --wm-h: 22px; }
.hr-we__chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px 4px 7px; border-radius: 999px; background: var(--hm-soft);
  color: var(--hm-ink); font: 700 11.5px/1 var(--text); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.hr-we__chip svg { width: 13px; height: 13px; fill: currentColor; }
.hr-we__links { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; margin-left: -4px; }
.hr-we__site, .hr-we__who { display: inline-flex; align-items: center; gap: 5px; min-height: 40px; padding: 0 4px; border: 0; background: none;
  color: var(--ink); font: 650 14px/1 var(--text); text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hr-we__site { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--ink) 30%, transparent); text-underline-offset: 3px; }
.hr-we__site svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.hr-we__who { color: var(--hm-ink); }
.hr-we__i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid currentColor;
  font: italic 700 11px/1 Georgia, 'Times New Roman', serif; }
.hr-we__site:hover, .hr-we__who:hover { color: var(--hm); }
.hr-we__site:focus-visible, .hr-we__who:focus-visible { outline: 3px solid var(--hm); outline-offset: 1px; border-radius: 8px; }
/* the bid at this address (steps 2 and 3), with "Who is WeReno?" after it */
.hr-price-line .hr-we__who { min-height: 32px; margin: -6px 0; font-size: 13.5px; vertical-align: middle; }
.hr-go--alt { background: var(--bg); color: var(--ink); border: 1.5px solid var(--line); }
/* their house, with a face, at the address (stop 5) */
.hr-house-slot { margin-top: 12px; }
.hr-house-slot:empty { display: none; }
.hr-house { margin: 0; display: grid; grid-template-columns: minmax(0, 132px) minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px;
  border-radius: 16px; background: var(--hm-soft); }
.hr-house__art { display: block; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--tint); }
.hr-house__art svg { display: block; width: 100%; height: 100%; }
.hr-house__hi { margin: 0; font: 700 15.5px/1.3 var(--display); color: var(--hm-ink); }
.hr-house__at { margin: 4px 0 0; font-size: 13px; line-height: 1.3; color: var(--sub); overflow-wrap: anywhere; }
.hr-house__k { margin: 2px 0 0; font-size: 12.5px; line-height: 1.3; color: var(--faint); }
/* the email, saved as they type (stop 9): no button, a quiet "Saved ✓", a one-tap typo fix */
.hr-email__st { margin: 6px 0 0; font-size: 13.5px; color: var(--sub); }
.hr-email__st:empty { display: none; }
.hr-email__st.is-ok { color: var(--gd); font-weight: 700; }
.hr-email__fix { margin-top: 4px; }

/* ── HX-6 · photos and a video on every screen ("Know What the Pro Will Do", approved 2026-10-29): the "＋ Add photos or
   a video" chip in the job header (the slim header on a phone, the left panel on a computer; on screen 1 under the job),
   its small thumbnails with their ✕, and the whole window as a drop target while a file is dragged over it. ── */
.hr-addm { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px 0 12px; border-radius: 999px;
  border: 1.5px dashed color-mix(in srgb, var(--gd) 60%, transparent); background: var(--bg); color: var(--gd);
  font: 650 14.5px/1.2 var(--text); cursor: pointer; }
.hr-addm svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.hr-addm:hover { border-style: solid; background: var(--g-soft); }
.hr-addm:focus-visible { outline: 3px solid var(--g); outline-offset: 2px; }
.hr-addm:disabled { opacity: .55; cursor: default; }
.hr-addm.is-going { border-style: solid; }
.hr-addm.is-going svg { animation: hr-spin 1.2s linear infinite; }
@keyframes hr-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hr-addm.is-going svg { animation: none; } }
.hr-addm__note { margin: 6px 0 0; color: var(--sub); font-size: 13px; line-height: 1.35; }
.hr-addm__thumbs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.hr-addm__thumbs:empty { display: none; }
.hr-addm__thumbs .hr-thumb { width: 52px; height: 52px; border-radius: 10px; }
.hr-thumb video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.hr-thumb__len { position: absolute; left: 3px; bottom: 3px; padding: 1px 5px; border-radius: 6px; background: rgb(0 0 0 / .62); color: #fff;
  font: 650 12px/16px var(--text); font-style: normal; pointer-events: none; }
.hr-thumb--going { display: grid; place-items: center; border-style: dashed; background: var(--tint); }
.hr-thumb--going i { font: 700 12.5px/1 var(--text); font-style: normal; color: var(--gd); }
/* screen 1: the chip under the job card */
.hr-m1 { margin: 12px 0 2px; }
.hr-m1__sub { display: inline-block; margin-left: 10px; color: var(--sub); font-size: 13px; vertical-align: middle; }
.hr-shell[data-step="1"] .hr-list:not([hidden]) ~ .hr-m1 { display: none; }
/* the job header from step 2: a row under the title */
.hr-jh__m { display: none; }
html.hr-split .hr-shell:not([data-step="1"]) .hr-jh__m { display: block; }
.hr-shell[data-step="photo"] .hr-jh__m .hr-addm__thumbs { display: none; }
@media (max-width: 959.98px) {
  /* a phone: one row under the title (the chip, then its thumbnails scrolling sideways), so the header stays slim */
  html.hr-split .hr-shell:not([data-step="1"]) .hr-jh__m { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
  .hr-jh__m .hr-addm { flex: none; min-height: 44px; padding: 0 14px 0 10px; font-size: 14px; }
  .hr-jh__m .hr-addm__thumbs { flex: 1 1 0; min-width: 0; margin-top: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .hr-jh__m .hr-addm__thumbs .hr-thumb { flex: none; }
  .hr-jh__m .hr-addm__thumbs .hr-thumb button span { width: 20px; height: 20px; font-size: 14px; }
  .hr-jh__m .hr-thumb__len { left: 2px; bottom: 2px; padding: 0 3px; }
  .hr-jh__m .hr-addm__note { order: 3; flex-basis: 100%; margin: 0; }
}
@media (min-width: 960px) {
  /* a computer: the chip and its thumbnails on one line under the title, so the panel's picture and answers still fit */
  html.hr-split .hr-shell:not([data-step="1"]) .hr-jh__m { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 12px; }
  .hr-jh__m .hr-addm__thumbs { margin-top: 0; }
  .hr-jh__m .hr-addm__note { flex-basis: 100%; margin: 0; }
}
@media (min-width: 960px) and (max-height: 820px) {
  html.hr-split .hr-shell:not([data-step="1"]) .hr-hero { height: 150px; }
}
.hr-media-in { position: fixed; left: -9999px; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.hr-dropall { position: fixed; z-index: 60; inset: 12px; display: grid; place-items: center; padding: 24px; border-radius: 24px;
  border: 3px dashed var(--g); background: color-mix(in srgb, var(--g-soft) 88%, transparent); pointer-events: none; }
.hr-dropall[hidden] { display: none; }
.hr-dropall p { margin: 0; max-width: 520px; text-align: center; font: 750 26px/1.25 var(--display); color: var(--ink); }

/* ── Know What the Pro Will Do · HX-2: "What the pro will do" in Handyman's violet, the two doors, the check's
   price, the "before they come" tip and "What happens next" (hire.js; every word the server's or words.json) ── */
.hr-pwd { grid-column: 1 / -1; margin: 0; padding: 10px 12px 11px; border-radius: 14px 14px 14px 4px; background: var(--hm-soft); color: var(--hm-ink);
  display: grid; gap: 5px; min-width: 0; }
.hr-pwd p { margin: 0; font-size: 14px; line-height: 1.45; }
.hr-pwd__k { margin: 0; font: 700 12.5px/1.2 var(--text); letter-spacing: .06em; text-transform: uppercase; color: var(--hm); }
.hr-pwd .hr-pwd__k { font-size: 12.5px; }
.hr-pwd__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.hr-pwd__list li { position: relative; padding-left: 18px; font-size: 14px; line-height: 1.4; color: var(--ink); }
.hr-pwd__list li::before { content: ''; position: absolute; left: 2px; top: .5em; width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--hm); box-sizing: border-box; }
.hr-pwd--say { margin-top: 8px; }
.hr-job--tell .hr-pwd { margin-top: 8px; }
.hr-cf__said { margin: 0 0 4px; font: 650 12.5px/1.25 var(--text); letter-spacing: .04em; color: var(--hm-ink); }
.hr-cf { display: grid; gap: 10px; }
.hr-door { display: grid; gap: 2px; width: 100%; min-height: 56px; padding: 11px 14px; text-align: left; cursor: pointer; border-radius: 16px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: inherit; }
.hr-door b { font: 700 16px/1.25 var(--display); }
.hr-door span { font-size: 13.5px; line-height: 1.35; color: var(--sub); }
.hr-door--lead { border: 2px solid color-mix(in srgb, var(--hm) 60%, transparent); padding: 10px 13px; }
.hr-door:hover { border-color: var(--hm); }
.hr-door:focus-visible, .hr-cf__sos:focus-visible { outline: 3px solid color-mix(in srgb, var(--hm) 55%, transparent); outline-offset: 2px; }
.hr-cf__fine { margin: 0; font-size: 13px; line-height: 1.35; color: var(--sub); }
.hr-cf__sos { justify-self: start; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1.5px solid color-mix(in srgb, var(--stop) 55%, transparent);
  background: transparent; color: var(--stop); font: 700 14px/1 var(--text); cursor: pointer; }
.hr-cf__fee { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 12px 0 6px; padding: 12px 14px;
  border-radius: 14px; border: 1px solid var(--line); background: var(--bg); }
.hr-cf__fee span { display: grid; gap: 2px; min-width: 0; }
.hr-cf__fee small { font-size: 13px; color: var(--sub); }
.hr-cf__fig { flex: none; font: 800 22px/1.1 var(--display); font-variant-numeric: tabular-nums; }
[data-s="check"] .hr-pwd { margin-top: 10px; }
.hr-tip { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--hm-soft); color: var(--hm-ink); font-size: 14px; line-height: 1.45; }
.hr-tip b { margin-right: 4px; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--hm); }
.hr-next { margin: 16px 0 0; padding: 12px 14px; border-radius: 14px; background: var(--hm-soft); }
.hr-next__h { margin: 0 0 6px; font: 700 15px/1.25 var(--display); color: var(--hm-ink); }
.hr-next__list { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; line-height: 1.4; color: var(--ink); }
.hr-next__list .hr-pwd__list { margin-top: 4px; }
/* the side: a folded line in the phone's slim header; the open list in the computer's left panel */
.hr-jh__pwd { grid-column: 1 / -1; min-width: 0; }
.hr-jh__pwd[hidden] { display: none; }
.hr-jh__pwd summary { min-height: 44px; display: flex; align-items: center; gap: 6px; cursor: pointer; font: 700 14px/1.2 var(--text); color: var(--hm-ink); list-style: none; }
.hr-jh__pwd summary::-webkit-details-marker { display: none; }
.hr-jh__pwd summary::after { content: ''; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); margin-left: 4px; }
.hr-jh__pwd[open] summary::after { transform: rotate(-135deg) translateY(-1px); }
.hr-jh__pwd .hr-pwd__list { padding: 0 0 8px; }
.hr-ans__pwd { margin: 16px 0 0; padding: 12px 14px; border-radius: 14px; background: var(--hm-soft); display: grid; gap: 6px; }
.hr-ans__pwd[hidden] { display: none; }
.hr-ans__pwd .hr-pwd__list li { font-size: 15px; }
@media (min-width: 960px) { .hr-jh__pwd { display: none !important; } }
.hr-shell[data-step="check"] .hr-s[data-s="check"] { display: block; animation: hr-in .22s ease-out; }
/* HX-2: the all-set screen's one ask for photos or a video (the photo door leads with it) */
.hr-dm { margin: 14px 0 0; display: grid; gap: 8px; justify-items: start; }
.hr-dm[hidden] { display: none; }
.hr-dm__p { margin: 0; font-size: 14px; line-height: 1.4; color: var(--sub); }
.hr-dm.is-lead { padding: 12px 14px; border-radius: 14px; border: 2px solid color-mix(in srgb, var(--hm) 60%, transparent); }
.hr-dm.is-lead .hr-dm__p { color: var(--ink); }
.hr-house__art--photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* HP-1: the street photo opens big: a button with a magnifier in its corner, and the lightbox (the receipt's card, in
   the middle on a computer, a full-width sheet from the foot on a phone, nothing dimmed behind it) */
button.hr-house__art--photo { position: relative; width: 100%; padding: 0; border: 0; margin: 0; cursor: zoom-in; font: inherit; color: inherit; }
button.hr-house__art--photo:focus-visible { outline: 3px solid var(--hm); outline-offset: 2px; }
.hr-house__zoom { position: absolute; right: 5px; bottom: 5px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: rgb(255 255 255 / .92); color: #1d1a2e; box-shadow: 0 1px 4px rgb(20 16 40 / .3); transition: transform .12s; }
.hr-house__zoom svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
button.hr-house__art--photo:hover .hr-house__zoom { transform: scale(1.08); }
.hr-hlb { position: fixed; inset: 0; z-index: 10011; pointer-events: none; }
.hr-hlb[hidden] { display: none; }
.hr-hlb__card { position: absolute; left: 0; right: 0; bottom: 0; pointer-events: auto; display: flex; flex-direction: column;
  max-height: calc(100dvh - 24px - env(safe-area-inset-top)); background: var(--bg); color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--hm) 22%, var(--line)); border-bottom: 0; border-radius: 22px 22px 0 0;
  box-shadow: 0 -12px 40px -12px rgb(20 16 40 / .35); outline: 0; padding-bottom: calc(14px + env(safe-area-inset-bottom));
  transform: translateY(16px); opacity: 0; transition: transform .22s ease, opacity .18s ease; }
.hr-hlb.is-in .hr-hlb__card { transform: none; opacity: 1; }
.hr-hlb__head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 16px 8px; }
.hr-hlb__t { margin: 0; font: 700 17px/1.2 var(--display); letter-spacing: -.01em; }
.hr-hlb__head .hr-rc__x { margin: 0 -8px 0 0; }
.hr-hlb__pic { flex: 0 1 auto; min-height: 0; margin: 0 16px; border-radius: 14px; overflow: hidden; background: var(--tint); }
.hr-hlb__pic img { display: block; width: 100%; height: auto; max-height: calc(100dvh - 170px); object-fit: contain; }
.hr-hlb__at { flex: none; margin: 10px 16px 0; font-size: 14px; line-height: 1.35; color: var(--sub); overflow-wrap: anywhere; }
@media (min-width: 720px) {
  .hr-hlb__card { left: 50%; right: auto; top: 50%; bottom: auto; width: min(760px, calc(100vw - 48px)); max-height: calc(100dvh - 48px);
    border-radius: 20px; border-bottom: 1px solid color-mix(in srgb, var(--hm) 22%, var(--line)); box-shadow: 0 22px 50px -20px rgb(20 16 40 / .45);
    transform: translate(-50%, calc(-50% + 8px)); padding-bottom: 16px; }
  .hr-hlb.is-in .hr-hlb__card { transform: translate(-50%, -50%); }
  .hr-hlb .hr-rc__grab { display: none; }
  .hr-hlb__head { padding: 14px 18px 10px; }
  .hr-hlb__t { font-size: 18px; }
  .hr-hlb__pic { margin: 0 18px; }
  .hr-hlb__pic img { max-height: calc(100dvh - 190px); }
  .hr-hlb__at { margin: 12px 18px 0; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .hr-hlb__card { transition: none; } }
/* HX-2: where the code goes: two clear pills, a text or an email */
.hr-via { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 2px; }
.hr-via__opt { min-height: 44px; padding: 0 10px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--bg); color: var(--ink);
  font: 700 14.5px/1.15 var(--text); cursor: pointer; }
.hr-via__opt[aria-checked="true"] { border-color: var(--hm); background: var(--hm-soft); color: var(--hm-ink); }
.hr-via__opt:focus-visible { outline: 3px solid color-mix(in srgb, var(--hm) 55%, transparent); outline-offset: 2px; }
/* on the code and the photo steps the phone header stays one row: the tip and the ask have the room */
.hr-shell:is([data-step="4"], [data-step="photo"]) .hr-jh__pwd { display: none !important; }
/* a computer under 900 px tall: with the steps beside them, the picture gives way so the panel never runs off */
@media (min-width: 960px) and (max-height: 900px) {
  html.hr-split .hr-shell:not([data-step="1"]) .hr-intro:has(.hr-ans__pwd:not([hidden])) .hr-hero { display: none; }
}

/* ── Handyman, Powered by WeReno (lane WR-1, tools/who.py and /css/who.css): his hello, the steps, the WeReno panel and
   the warranty badge on step 1 only; from step 2 the left side is the job, as before. On a computer's step 1 they take
   the sub line's and the picture's place (the step card shows the job's own pictures). ── */
.hr-shell:not([data-step="1"]) :is(.who-hi, .who-side) { display: none !important; }
@media (min-width: 960px) {
  .hr-intro .who-side { display: flex; flex-direction: column; flex: none; }
  .hr-shell[data-step="1"] :is(.hr-sub, .hr-hero) { display: none !important; }
  .hr-intro .who-hi { flex: none; }
}

/* TP-1: the hidden test page's note stays on every screen size (the phone header hides .hr-sub elsewhere) */
.hr-shell[data-test-page][data-step] .hr-sub { display: block !important; font-size: 14px; margin-top: 4px; }
/* HX-2: the mobile and the email side by side where there is room, then where the code goes */
.hr-two2 { display: grid; grid-template-columns: 1fr; gap: 0 12px; }
@media (min-width: 360px) { .hr-two2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); } }
.hr-two2 .hr-field input { min-width: 0; }
.hr-via__k { margin-top: 12px; }
.hr-via { margin-top: 6px; }

/* ── Learn more, and the price with its tax (lane LM-2, approved 2026-10-29). The tax label beside every price; the job
   card's two equal outlined buttons (neither green: "Get my bids" stays the only green one); the receipt, a card
   beside the job on a computer with nothing dimmed behind it, a sheet from the foot on a phone. ── */
.hr-tax { font: 600 13px/1.2 var(--text); color: var(--sub); letter-spacing: 0; white-space: nowrap; }
.hr-job__p .hr-tax { margin-left: 2px; }
.hr-thing__from { border-radius: 10px; }
.hr-thing__from .hr-thing__fk { display: block; font: 600 10.5px/1.2 var(--text); color: var(--sub); overflow: hidden; text-overflow: ellipsis; }
.hr-thing__from .hr-tax { display: block; font: 600 10.5px/1.2 var(--text); color: var(--sub); overflow: hidden; text-overflow: ellipsis; }
.hr-job .hr-job__inc--one { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-top: 8px; -webkit-line-clamp: unset; }
.hr-job .hr-job__inc--one b { display: inline; margin-right: 4px; }
.hr-job__two { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hr-job__two.is-one { grid-template-columns: 1fr; }
.hr-ob { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 10px; border-radius: 12px;
  border: 1.5px solid color-mix(in srgb, var(--ink) 70%, transparent); background: var(--bg); color: var(--ink); font: 700 14.5px/1.15 var(--text);
  cursor: pointer; transition: background-color .15s, transform .12s; }
.hr-ob:hover { background: var(--tint); }
.hr-ob:active { transform: scale(.985); }
.hr-ob:focus-visible { outline: 3px solid var(--hm); outline-offset: 2px; }
@media (max-width: 439.98px) { .hr-ob { gap: 6px; padding: 0 6px; font-size: 14px; white-space: nowrap; } .hr-job__two { gap: 6px; } }
.hr-ob svg { flex: none; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hr-rlink { display: inline; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
  text-decoration: underline dotted color-mix(in srgb, var(--hm) 60%, transparent); text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.hr-rlink .hr-tax { font-size: 13px; }
.hr-rlink:focus-visible { outline: 3px solid var(--hm); outline-offset: 2px; border-radius: 4px; }
.hr-pick__r { position: relative; }
.hr-pick__r .hr-rlink::after { content: ''; position: absolute; inset: -10px 0; }   /* a 44px tap height, the line no taller */

.hr-rc { position: fixed; inset: 0; z-index: 10010; pointer-events: none; }
.hr-rc[hidden] { display: none; }
.hr-rc__card { position: absolute; left: 0; right: 0; bottom: 0; pointer-events: auto; display: flex; flex-direction: column;
  max-height: calc(100dvh - 88px - env(safe-area-inset-top)); background: var(--bg); color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--hm) 22%, var(--line)); border-bottom: 0; border-radius: 22px 22px 0 0;
  box-shadow: 0 -12px 40px -12px rgb(20 16 40 / .35); outline: 0;
  transform: translateY(16px); opacity: 0; transition: transform .22s ease, opacity .18s ease; padding-bottom: env(safe-area-inset-bottom); }
.hr-rc.is-in .hr-rc__card { transform: none; opacity: 1; }
.hr-rc__grab { flex: none; width: 40px; height: 4px; border-radius: 3px; background: var(--line); margin: 8px auto 0; }
.hr-rc__head { flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 8px 16px 8px; }
.hr-rc__eye { margin: 0; font: 650 10.5px/1.3 ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: .07em; text-transform: uppercase; color: var(--hm-ink); }
.hr-rc__t { margin: 3px 0 0; font: 700 17px/1.2 var(--display); letter-spacing: -.01em; }
.hr-rc__meta { margin: 2px 0 0; color: var(--sub); font-size: 12.5px; line-height: 1.3; }
.hr-rc__x { margin: -6px -8px 0 0; }
.hr-rc__body { flex: 0 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.hr-rc__tear { height: 1px; margin: 0 16px; background: repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 11px); }
.hr-rc__lines { padding: 6px 16px 8px; font-variant-numeric: tabular-nums; }
.hr-rc__ln { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 5px 0; }
.hr-rc__ln span { font-size: 14px; line-height: 1.3; min-width: 0; }
.hr-rc__ln em { display: block; font-style: normal; font-size: 12px; line-height: 1.35; color: var(--sub); margin-top: 1px; }
.hr-rc__ln b { font: 600 14px/1.3 ui-monospace, 'SF Mono', Menlo, monospace; white-space: nowrap; text-align: right; }
.hr-rc__ln b.is-soft { font: 650 12.5px/1.3 var(--text); color: var(--sub); white-space: normal; max-width: 150px; }
.hr-rc__ln.is-sub { border-top: 1px solid var(--line); margin-top: 3px; padding-top: 8px; }
.hr-rc__ln.is-sub + .hr-rc__ln.is-sub { border-top: 0; margin-top: 0; padding-top: 5px; }
.hr-rc__ln.is-tot { border-top: 2px solid var(--ink); margin-top: 3px; padding-top: 8px; }
.hr-rc__ln.is-tot span { font-weight: 800; font-size: 15px; }
.hr-rc__ln.is-tot b { font-size: 15.5px; font-weight: 700; }
.hr-rc__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 2px 16px 12px; }
.hr-rc__fact { background: var(--tint); border-radius: 10px; padding: 7px 9px; }
.hr-rc__fact h3 { margin: 0 0 1px; font: 650 9.5px/1.3 ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--sub); }
.hr-rc__fact p { margin: 0; font-size: 12px; line-height: 1.38; }
.hr-rc__foot { flex: none; padding: 10px 16px 12px; border-top: 1px solid var(--line); display: grid; gap: 6px; }
.hr-rc__foot .hr-go { min-height: 48px; font-size: 16px; }
.hr-rc__src { margin: 0; font: 500 10.5px/1.4 ui-monospace, 'SF Mono', Menlo, monospace; color: var(--sub); }
@media (min-width: 960px) {
  .hr-rc__card { left: 0; right: auto; bottom: auto; top: 0; width: 380px; max-height: calc(100dvh - 24px); border-radius: 20px; border-bottom: 1px solid color-mix(in srgb, var(--hm) 22%, var(--line));
    box-shadow: 0 22px 50px -20px rgb(20 16 40 / .45); transform: translateY(8px); padding-bottom: 0; }
  .hr-rc__grab { display: none; }
  .hr-rc__head { padding: 16px 18px 10px; }
  .hr-rc__t { font-size: 18px; }
  .hr-rc__lines { padding: 8px 18px 10px; }
  .hr-rc__tear { margin: 0 18px; }
  .hr-rc__facts { padding: 2px 18px 14px; gap: 8px; }
  .hr-rc__fact { padding: 8px 10px; }
  .hr-rc__fact p { font-size: 12.5px; }
  .hr-rc__foot { padding: 12px 18px 14px; }
}
@media (prefers-reduced-motion: reduce) { .hr-rc__card { transition: none; } }

/* HB-1: "‹ All plumbing jobs", back to the list a job was picked from (the outlined button's look, 44px, the card's top) */
.hr-lback { grid-column: 1 / -1; justify-self: start; max-width: 100%; min-height: 44px; display: inline-flex; align-items: center; gap: 4px;
  margin: 0 0 -4px; padding: 0 14px 0 8px; border-radius: 12px; border: 1.5px solid color-mix(in srgb, var(--ink) 70%, transparent);
  background: var(--bg); color: var(--ink); font: 700 14.5px/1.15 var(--text); cursor: pointer; transition: background-color .15s, transform .12s; }
.hr-lback span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hr-lback svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hr-lback:hover { background: var(--tint); }
.hr-lback:active { transform: scale(.985); }
.hr-lback:focus-visible { outline: 3px solid var(--hm); outline-offset: 2px; }

/* ── HC-1 (the founder, 2026-10-30, on two iPhone shots of the plumbing grid: "Cards could be bigger and we shouldnt
   impede on image with price"): the tile's picture is a whole 4:3 picture with nothing on it; its figure is its own
   line under the name and the problem words ("From $90", the tax under it), at the foot of the tile so a row's
   figures line up. Names and problem words wrap whole (no clamp, never "Water filter or…"); a narrow phone shows two
   problem words, a tight card none of the third. The lists' Back ("‹ All plumbing") is HB-1's outlined button. ── */
.hr-things { gap: 8px; }
.hr-things .hr-thing { gap: 4px; padding: 5px 5px 8px; border-radius: 16px; }
.hr-things .hr-thing--lead { padding: 4px 4px 7px; }
.hr-things .hr-thing__art { height: auto; aspect-ratio: 4 / 3; border-radius: 11px; }
.hr-things .hr-thing__t { display: block; -webkit-line-clamp: unset; overflow: visible; overflow-wrap: break-word; font-size: 14px; line-height: 1.2; }
.hr-things .hr-thing__h, .hr-things.is-tight .hr-thing__h { display: block; -webkit-line-clamp: unset; overflow: visible; line-height: 1.25; }
.hr-things.is-tight .hr-thing__h3 { display: none; }
.hr-things .hr-thing--more .hr-thing__art { aspect-ratio: 4 / 3; }
.hr-thing__plus { width: 40px; height: 40px; }
.hr-thing__pr { margin-top: auto; padding-top: 3px; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline;
  column-gap: 4px; font: 650 12px/1.25 var(--text); color: var(--sub); }
.hr-thing__pr b { font: 800 15.5px/1.2 var(--text); color: var(--gd, var(--ink)); font-variant-numeric: tabular-nums; }
.hr-thing__pr .hr-tax { flex-basis: 100%; font-size: 11px; line-height: 1.25; }
.hr-thing__pr.is-wait { min-height: 33px; }
.hr-up { margin: 0 0 8px; }
@media (max-width: 519px) {
  .hr-things { gap: 6px; }
  .hr-things .hr-thing { gap: 3px; padding: 4px 4px 7px; }
  .hr-things .hr-thing--lead { padding: 3px 3px 6px; }
  .hr-things .hr-thing__art { height: auto; border-radius: 10px; }
  .hr-things .hr-thing__t { font-size: 13.5px; line-height: 1.18; }
  .hr-thing__plus { width: 34px; height: 34px; }
}
@media (max-width: 430px) {
  .hr-things .hr-thing__art { height: auto; }
  .hr-thing__pr b { font-size: 15px; }
}
/* HC-1: a long joined word ("thermocouple/thermopile") breaks inside its own column, never under the price */
.hr-row__x b { overflow-wrap: anywhere; }
.hr-row__tx { display: block; margin-top: 2px; font-size: 12px; }

/* ── HC-2: their words find the set jobs that match (each with its figure), "None of these" under them, and the
   describe card's three tap questions (none picked; a tap fills its answer, the HB-1 outlined look). ── */
.hr-tell__f { margin-top: 6px; }
.hr-res { margin-top: 10px; }
.hr-res__h { margin: 0 0 6px; font-weight: 650; color: var(--sub); }
.hr-row__off.is-wait { min-width: 64px; min-height: 30px; }
.hr-none { border-style: dashed; }
.hr-none .hr-row__x b { color: var(--gd, var(--hm)); }
.hr-desc__p { margin: 2px 0 8px; }
.hr-dq { margin: 12px 0 0; padding: 0; border: 0; min-width: 0; }
.hr-dq legend { padding: 0; margin: 0 0 6px; }
.hr-dq__o { display: flex; flex-wrap: wrap; gap: 6px; }
.hr-dq__b { min-height: 44px; padding: 0 14px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--bg); color: var(--ink);
  font: 650 14.5px/1.15 var(--text); cursor: pointer; transition: background-color .15s, border-color .15s, transform .12s; }
.hr-dq__b:active { transform: scale(.985); }
.hr-dq__b:focus-visible { outline: 3px solid var(--hm); outline-offset: 2px; }
.hr-dq__b.is-on { border-color: var(--g); background: var(--g-soft); font-weight: 750; }
@media (hover: hover) { .hr-dq__b:hover { border-color: color-mix(in srgb, var(--ink) 45%, var(--line)); } }
.hr-res .hr-tell__rows { margin-top: 0; }
.hr-thing__pr.is-wait.is-nt { min-height: 19px; }

/* ── HC-3 ("Cleaner job cards"): the trade's grid has no problem words; one count line ("8 jobs", the same one-line
   height on every card so the From lines line up); pictures as tall as the card allows (--hc-art, fitThings, fitted
   once); "Something else?" pinned at the card's foot. ── */
.hr-things--grid .hr-thing__art { height: var(--hc-art, auto); }
.hr-thing__n { position: relative; display: block; min-height: 15px; overflow: hidden; white-space: nowrap;
  font: 650 12px/1.25 var(--text); color: var(--sub); }
.hr-things--grid .hr-thing__t { margin-top: 2px; }
.hr-dock__else { display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; min-height: 44px; margin: -4px 0 0; padding: 0 8px;
  border: 0; background: none; color: var(--hm-ink); font: 700 15px/1.2 var(--text); cursor: pointer; }
.hr-dock__else[hidden] { display: none; }
.hr-dock__else svg { width: 18px; height: 18px; fill: none; stroke: var(--hm); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hr-dock__else:focus-visible { outline: 3px solid var(--hm); outline-offset: -3px; border-radius: 10px; }
/* the trade's grid needs the room: no "YOUR JOB" eyebrow over it (the step bar says it), tighter tile insides */
.hr-s[data-s="1"]:has(.hr-things--grid) > .hr-k { display: none; }
.hr-things--grid .hr-thing { gap: 2px; padding-bottom: 6px; }
.hr-things--grid .hr-thing__pr { padding-top: 1px; }
/* the search line stays whole under the step bar while the grid scrolls (the founder's shot: it was cut under it) */
.hr-job:has(.hr-things--grid) .hr-gq { position: sticky; top: 6px; z-index: 4; box-shadow: 0 6px 14px -10px rgb(0 0 0 / .35); }
/* (the founder: "Ditch the carousel just show number of jobs … titles are going big small sometimes"): the count is
   one still line, its height kept while empty; every name in the grid is one size, set here from the window's width
   and never by script, wrapping to two lines when it must (a row's cards stay one height) */
.hr-thing__n { height: 15px; min-height: 0; }
.hr-things--grid .hr-thing__t { font-size: clamp(12.5px, 3.2vw, 13.5px); }
/* a phone's grid takes more of the card's width, so more names fit one line */
@media (max-width: 430px) {
  .hr-body:has(.hr-things--grid) { padding-left: 8px; padding-right: 8px; }
  .hr-job:has(.hr-things--grid) { padding-left: 8px; padding-right: 8px; }
  .hr-things--grid .hr-thing { padding-left: 3px; padding-right: 3px; }
}
/* the "More below" arrow at the body's right edge, small, clear of the cards' centred words */
.hr-body + [data-scroll-more-cue] .hm-more__btn { left: calc(var(--hr-body-w, 0px) - 10px) !important; }
.hr-body + [data-scroll-more-cue] .hm-more__dot { width: 20px; height: 20px; }
.hr-body + [data-scroll-more-cue] .hm-more__dot svg { width: 16px; height: 16px; }

/* ── BK-5 (the /hire launch, 2026-10-30): the contact step shows the first price before the code, and the code opens
   in place under the name and number. On a phone the slim job header gives way to the card (it says the same job
   with its prices), so nothing is said twice. ── */
.hr-yc { margin: 10px 0 2px; padding: 10px 12px 10px; border-radius: 16px; background: var(--g-soft); }
.hr-yc__top { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; align-items: center; }
.hr-yc__top:not(:has(.hr-yc__art[style])) { grid-template-columns: minmax(0, 1fr); }
.hr-yc__art { display: block; width: 40px; height: 40px; border-radius: 10px; background: #fff center / cover no-repeat; border: 1px solid var(--line); }
.hr-yc__art:not([style]) { display: none; }
.hr-yc__k { margin: 0; font: 650 11.5px/1.2 var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--gd); }
.hr-yc__t { margin: 2px 0 0; font: 700 15.5px/1.25 var(--display); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hr-yc__rows { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.hr-yc__rows li { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; min-height: 44px; padding: 6px 10px;
  border-radius: 12px; background: var(--bg); }
.hr-yc__l { min-width: 0; font-size: 14px; line-height: 1.3; color: var(--ink); }
.hr-yc__rows li.is-we .hr-yc__l { font: 650 12px/1.3 var(--text); letter-spacing: .06em; text-transform: uppercase; color: var(--hm-ink); }
.hr-yc__f { flex: none; text-align: right; font: 800 18px/1.1 var(--display); letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--ink); }
.hr-yc__f .hr-tax { margin-left: 4px; font-size: 12px; font-weight: 600; letter-spacing: 0; }
.hr-yc__rows li.is-q .hr-yc__l { font-weight: 650; color: var(--gd); }
.hr-yc__p { margin: 7px 0 0; font-size: 13.5px; font-weight: 650; color: var(--gd); }
@media (max-width: 959.98px) {
  html.hr-split .hr-shell[data-step="4"]:has(#you-card:not([hidden])) .hr-jh { display: none; }
}
/* the code sent: the name and number stay, read-only and quiet; what they agreed to folds away; the code under them */
#you-form.is-sent :is(.hr-via__k, .hr-via, #you-tip, #consent, #you-note) { display: none; }
#you-form.is-sent :is(.hr-label, .hr-two2 .hr-label) { display: none; }
#you-form.is-sent .hr-yc + .hr-label + .hr-field { margin-top: 10px; }
#you-form.is-sent .hr-two2 { margin-top: 6px; gap: 6px 8px; }
#you-form.is-sent .hr-field { min-height: 40px; padding: 0 12px; background: var(--g-soft); border-color: transparent; }
#you-form.is-sent .hr-field input { height: 38px; font-size: 15px; color: var(--sub); }
.hr-code { margin-top: 12px; animation: hr-in .22s ease-out; }
.hr-code .hr-links { gap: 0 18px; margin-top: 4px; }
.hr-code .hr-note { margin: 0 0 10px; }
.hr-code .hr-field--code { border-color: var(--g); }

/* ── PB-2 · Pay, on /hire itself (One booking flow, 2026-10-30): the job card, the order's lines and tax, held not
   charged, free cancelling and the warranty, then Stripe's own buttons and card form, in this page's look ── */
.hr-shell[data-step="pay"] .hr-s[data-s="pay"] { display: block; animation: hr-in .22s ease-out; }
.hr-shell[data-step="pay"] .hr-jh__pwd { display: none !important; }
@media (max-width: 959.98px) {
  /* a phone: the Pay card is the job, so the slim job header above it would say it twice */
  html.hr-split .hr-shell[data-step="pay"] .hr-jh { display: none; }
}
.hr-pay__job { margin-top: 0; }
.hr-pay__dl { list-style: none; margin: 8px 0 0; padding: 8px 0 0; border-top: 1px solid color-mix(in srgb, var(--gd) 18%, transparent);
  display: grid; gap: 4px; }
.hr-pay__dl li { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 28px; font-size: 14px; }
.hr-pay__dk { color: var(--sub); }
.hr-pay__dv { min-width: 0; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hr-pay__ch { min-height: 44px; margin: -8px -6px; padding: 0 6px; font-size: 14px; }
.hr-pay__lines { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; font-size: 14.5px; }
.hr-pay__lines li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.hr-pay__lines li > span { min-width: 0; }
.hr-pay__lines small { display: block; color: var(--sub); font-size: 12.5px; }
.hr-pay__lines b { flex: none; font-variant-numeric: tabular-nums; font-weight: 650; }
.hr-pay__lines li.is-tax { color: var(--sub); font-size: 14px; }
.hr-pay__lines li.is-tax b { font-weight: 500; }
.hr-pay__lines li.is-total { margin-top: 2px; padding-top: 8px; border-top: 1px solid var(--line); }
.hr-pay__lines li.is-total span { font-weight: 700; }
.hr-pay__lines li.is-total b { font: 800 20px/1.1 var(--display); letter-spacing: -.01em; }
.hr-pay__wait { margin: 10px 0 0; color: var(--sub); font-size: 14px; }
.hr-pay__terms { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 4px; font-size: 13.5px; color: var(--sub); }
.hr-pay__terms li { position: relative; padding-left: 22px; }
.hr-pay__terms li::before { content: ""; position: absolute; left: 3px; top: .38em; width: 11px; height: 6px;
  border-left: 2px solid var(--gd); border-bottom: 2px solid var(--gd); transform: rotate(-45deg); }
.hr-pay__terms li.is-held { color: var(--ink); font-weight: 650; }
.hr-pay__form .hr-label { margin-top: 16px; }
.hr-pay__express:empty { display: none; }
.hr-pay__or { display: flex; align-items: center; gap: 10px; margin: 12px 0; color: var(--faint); font-size: 13px; }
.hr-pay__or::before, .hr-pay__or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.hr-pay__card { min-height: 60px; }
.hr-pay__card .hr-pay__wait { margin: 0 0 8px; }
.hr-pay__fb { margin-top: 14px; }
.hr-pay__plain { padding: 14px; border-radius: 16px; border: 1.5px solid var(--line); background: var(--bg); }
.hr-pay__plain p { margin: 0 0 10px; font-weight: 650; }
.hr-pay__acts { display: grid; gap: 8px; }
.hr-pay__acts .hr-opt { display: flex; align-items: center; justify-content: center; text-decoration: none; }