/* Handyman, Powered by WeReno (lane WR-1, tools/who.py): the "by WeReno" tag, Handyman's hello, the three steps, the
   WeReno panel, the warranty badge, the "i" and the sheet it opens, the after-booking warranty line. /hire and /join-v5
   both link it; it reads their own colours (--ink, --sub, --line, --bg, --paper, --g*, --hm*), light and dark. */

.who-brand { display: flex; align-items: center; min-width: 0; }
/* "by" and WeReno's own wordmark (the founder, 2026-10-29: "Use the wereno and we logos rather than saying wereno and
   blue w"). The light and dark wordmarks are different artworks (163x44 and 180x55 for the same letters), so the dark
   one is drawn 55/44 taller and pulled back by the difference, and the two read the same size. */
.who-wm { --wm-h: 15px; display: inline-flex; align-items: center; vertical-align: middle; flex: none; }
.who-wm img { display: block; width: auto; }
.who-wm__l { height: var(--wm-h); }
.who-wm__d { display: none !important; height: calc(var(--wm-h) * 1.25); margin: calc(var(--wm-h) * -.125) 0; }
:root[color-scheme="dark"] .who-wm__l { display: none !important; }
:root[color-scheme="dark"] .who-wm__d { display: block !important; }
.who-by { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; color: var(--faint); font: 600 12px/1 var(--text);
  white-space: nowrap; align-self: center; }
.who-by .who-wm { --wm-h: 15px; }

/* the "i" by "by WeReno": a small round mark in a 44px tap area, opens the sheet */
.who-info { flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; margin: 0 0 0 -8px; padding: 0; border: 0;
  background: none; color: var(--sub); -webkit-tap-highlight-color: transparent; }
.who-info span { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid currentColor;
  font: italic 700 12px/1 Georgia, 'Times New Roman', serif; transition: color .15s ease, background-color .15s ease; }
.who-info:hover span { color: var(--hm); }
.who-info:focus-visible { outline: 0; }
.who-info:focus-visible span { outline: 3px solid var(--hm); outline-offset: 2px; }

/* Handyman's hello */
.who-hi { display: flex; align-items: flex-end; gap: 6px; margin: 0 0 12px -6px; }
.who-hi__bot { flex: none; width: 64px; height: 64px; }
.who-hi__bot img { display: block; width: 100%; height: 100%; object-fit: contain; }
.who-hi__b { position: relative; margin: 0 0 8px; padding: 10px 14px; border-radius: 18px 18px 18px 6px; background: var(--bg);
  border: 1px solid var(--line); color: var(--sub); font-size: 15px; line-height: 1.4; box-shadow: 0 8px 20px -14px rgb(0 0 0 / .35); }
.who-hi__b b { display: block; color: var(--ink); font: 700 19px/1.25 var(--display); letter-spacing: -.01em; }

/* the three steps */
.who-steps { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.who-steps li { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.who-steps__n { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--hm);
  color: #fff; font: 800 12.5px/1 var(--display); }
:root[color-scheme="dark"] .who-steps__n { color: #15122a; }
.who-steps b { display: block; font: 700 14.5px/1.25 var(--text); color: var(--ink); }
.who-steps small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.3; color: var(--sub); }

/* Powered by WeReno */
.who-panel { margin-top: 16px; padding: 14px 16px; border-radius: 18px; background: var(--bg); border: 1px solid var(--line); }
.who-panel__h { margin: 0; font: 650 14.5px/1.3 var(--text); color: var(--ink); }
.who-panel__h .who-wm { --wm-h: 18px; margin-right: 6px; vertical-align: -3px; }
.who-panel__s { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; }
.who-panel__s li { display: flex; flex-direction: column; min-width: 0; }
.who-panel__s b { font: 800 20px/1.1 var(--display); letter-spacing: -.02em; color: var(--ink); }
.who-panel__s span { margin-top: 1px; font-size: 13px; line-height: 1.3; color: var(--sub); }

/* the warranty badge, linked to the terms */
.who-badge { display: inline-flex; align-items: center; gap: 10px; margin-top: 12px; min-height: 44px; padding: 6px 14px 6px 6px; border-radius: 999px;
  background: var(--hm-soft); color: var(--ink); text-decoration: none; align-self: flex-start; width: auto !important; }
.who-badge:hover b { text-decoration: underline; }
.who-badge:focus-visible { outline: 3px solid var(--hm); outline-offset: 2px; }
.who-badge__seal { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--hm);
  color: #fff; font: 800 14px/1 var(--display); box-shadow: inset 0 0 0 3px color-mix(in srgb, #fff 35%, var(--hm)); }
:root[color-scheme="dark"] .who-badge__seal { color: #15122a; }
.who-badge__x { display: flex; flex-direction: column; }
.who-badge b { font: 700 14.5px/1.2 var(--text); }
.who-badge small { font-size: 12.5px; line-height: 1.25; color: var(--hm-ink); }

/* the after-booking warranty line */
.who-done { display: flex; align-items: center; gap: 10px; margin: 16px 0 0; padding: 8px 12px 8px 8px; border-radius: 16px; background: var(--hm-soft);
  font-size: 14px; line-height: 1.35; color: var(--ink); }
.who-done b { font-weight: 700; }
.who-done a { color: var(--hm-ink); font-weight: 600; }

/* a phone (the founder, 2026-10-29: "Even the hey im handyman on mobiles no good tbh takes away from the viewport
   height. Instead lets do more like a learn more icon next to by wereno in header and a sexy popup explaining handyman
   and wereno etc"): one header row (the logo, "by WeReno" as quiet text, the "i"), nothing else above the headline. */
@media (max-width: 959.98px) {
  .who-side, .who-hi { display: none !important; }
  .who-by { margin-left: 4px; font-size: 11.5px; }
  .who-by .who-wm { --wm-h: 13px; }
}

/* Who's Handyman? Who's WeReno? A bottom sheet that rises with a little spring on a phone, a centred card on a
   computer; a soft scrim, the page still there behind it. */
.who-sheet { position: fixed; inset: 0; z-index: 2147482000; display: flex; align-items: flex-end; justify-content: center; }
.who-sheet__scrim { position: absolute; inset: 0; background: rgb(16 22 16 / .16); animation: who-fade .25s ease-out both; }
:root[color-scheme="dark"] .who-sheet__scrim { background: rgb(0 0 0 / .32); }
.who-sheet__card { position: relative; width: 100%; max-width: 520px; max-height: calc(100dvh - 24px); overflow-y: auto; display: flex; flex-direction: column;
  padding: 8px 18px calc(16px + env(safe-area-inset-bottom)); border-radius: 28px 28px 0 0; background: var(--bg); color: var(--ink);
  box-shadow: 0 -2px 0 0 color-mix(in srgb, var(--hm) 18%, transparent), 0 -18px 50px -10px rgb(20 20 40 / .28); outline: 0;
  animation: who-up .5s cubic-bezier(.22, 1.35, .4, 1) both; }
.who-sheet__grab { flex: none; align-self: center; width: 40px; height: 5px; border-radius: 3px; background: var(--line); margin-bottom: 10px; }
.who-sheet__hi { display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 8px; border-radius: 20px;
  background: linear-gradient(135deg, var(--hm-soft), color-mix(in srgb, var(--g-soft) 70%, var(--bg))); }
.who-sheet__bot { flex: none; width: 72px; height: 72px; animation: who-bob 2.6s ease-in-out .5s infinite; }
.who-sheet__bot img { display: block; width: 100%; height: 100%; object-fit: contain; }
.who-sheet__eye { margin: 0; font: 700 11px/1.2 var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--hm-ink); }
.who-sheet__k .who-wm { --wm-h: 17px; }
/* the handyman.ai logo is the same artwork light and dark (8:3, the mascot and the word), so no size correction */
.who-sheet__k .who-wm--hm { --wm-h: 32px; margin: -7px 0 -7px -4px; }
.who-wm--hm .who-wm__d { height: var(--wm-h); margin: 0; }
.who-sheet__h { margin: 3px 0 0; font: 750 23px/1.15 var(--display); letter-spacing: -.02em; }
.who-sheet__p { margin: 3px 0 0; font-size: 14.5px; line-height: 1.35; color: var(--sub); }
.who-sheet__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.who-sheet__col { padding: 12px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--hm) 20%, var(--line)); background: var(--bg); }
.who-sheet__col--wr { border-color: color-mix(in srgb, #1f4fd1 22%, var(--line)); }
.who-sheet__k { display: flex; align-items: center; gap: 7px; min-height: 22px; margin: 0 0 8px; font: 750 14.5px/1.2 var(--text); }
.who-sheet__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.who-sheet__col li { position: relative; padding-left: 20px; font-size: 13.5px; line-height: 1.3; color: var(--ink); }
.who-sheet__col li::before { content: ''; position: absolute; left: 0; top: .1em; width: 14px; height: 14px; border-radius: 50%;
  background: var(--hm) 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.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 10px no-repeat; }
.who-sheet__col--wr li::before { background-color: #1f4fd1; }
:root[color-scheme="dark"] .who-sheet__col--wr li::before { background-color: #5b84ff; }
.who-sheet__figs { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.who-sheet__figs li, .who-sheet__figs a { display: flex; flex-direction: column; }
.who-sheet__figs li { padding: 10px 12px; border-radius: 16px; background: var(--paper); min-width: 0; }
.who-sheet__figs a { color: inherit; text-decoration: none; }
.who-sheet__figs a span { text-decoration: underline; text-underline-offset: 2px; }
.who-sheet__figs b { font: 800 26px/1.05 var(--display); letter-spacing: -.03em; color: var(--ink); }
.who-sheet__figs span { margin-top: 2px; font-size: 12.5px; line-height: 1.25; color: var(--sub); }
.who-sheet__figs li:last-child { background: var(--hm-soft); }
.who-sheet__figs li:last-child b { color: var(--hm-ink); }
.who-sheet__ok { flex: none; width: 100%; min-height: 50px; margin-top: 14px; border: 0; border-radius: 16px; background: var(--hm); color: #fff;
  font: 700 16px/1 var(--text); box-shadow: 0 8px 20px -10px var(--hm); }
:root[color-scheme="dark"] .who-sheet__ok { color: #15122a; }
.who-sheet__ok:focus-visible { outline: 3px solid var(--hm-ink); outline-offset: 2px; }
/* a phone: each point on one line (the founder: "4 single line points") */
@media (max-width: 639.98px) {
  .who-sheet__cols { gap: 8px; }
  .who-sheet__col { padding: 11px 10px; }
  .who-sheet__col li { padding-left: 19px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 379.98px) {
  .who-sheet__card { padding-left: 14px; padding-right: 14px; }
  .who-sheet__col { padding: 10px 8px; }
  .who-sheet__col li { padding-left: 18px; font-size: 12.5px; letter-spacing: -.005em; }
}
@media (min-width: 640px) {
  .who-sheet { align-items: center; padding: 24px; }
  .who-sheet__card { border-radius: 28px; padding: 22px 24px; box-shadow: 0 30px 80px -20px rgb(20 20 40 / .35);
    animation-name: who-pop; }
  .who-sheet__grab { display: none; }
}
@keyframes who-fade { from { opacity: 0; } }
@keyframes who-up { from { transform: translateY(100%); } }
@keyframes who-pop { from { transform: translateY(24px) scale(.96); opacity: 0; } }
@keyframes who-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .who-sheet__scrim, .who-sheet__card, .who-sheet__bot { animation: none; } }

/* WeReno's own story (lane WR-1, tools/who.py wr()), opened from WeReno's instant bid on /hire. A dark hero in WeReno's
   colours (its lime, #7ed957) with the white wordmark, the YC chip and the three figures, then why its bid is safe and
   the way back to it. A clear catcher, never a grey or a blur: the page stays as it is behind the card. A bottom sheet
   on a phone, a centred card on a tablet, the hero beside the rest from 900px. */
.wr-sheet { --wr-lime: #7ed957; --wr-ink: #0a100c; position: fixed; inset: 0; z-index: 2147482001; display: flex; align-items: flex-end; justify-content: center; }
.wr-sheet[hidden] { display: none; }
.wr-sheet__catch { position: absolute; inset: 0; background: transparent; }
.wr-sheet__card { position: relative; width: 100%; max-width: 480px; max-height: calc(100dvh - 12px); overflow-y: auto; overscroll-behavior: contain;
  border-radius: 28px 28px 0 0; background: var(--bg); color: var(--ink); outline: 0;
  box-shadow: 0 -1px 0 0 rgb(126 217 87 / .35), 0 -24px 60px -12px rgb(10 16 12 / .45);
  animation: who-up .55s cubic-bezier(.22, 1.3, .4, 1) both; }
:root[color-scheme="dark"] .wr-sheet__card { box-shadow: 0 0 0 1px rgb(255 255 255 / .08), 0 -24px 60px -12px rgb(0 0 0 / .7); }

.wr-sheet__hero { position: relative; isolation: isolate; overflow: hidden; padding: 10px 20px 18px; color: #fff;
  background:
    radial-gradient(120% 90% at 105% -10%, rgb(126 217 87 / .38), transparent 55%),
    radial-gradient(90% 70% at -10% 110%, rgb(52 160 140 / .30), transparent 60%),
    var(--wr-ink); }
/* a fine blueprint grid, fading out downwards */
.wr-sheet__hero::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image: linear-gradient(rgb(255 255 255 / .06) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .06) 1px, transparent 1px);
  background-size: 22px 22px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%); mask-image: linear-gradient(180deg, #000, transparent 85%); }
.wr-sheet__glow { position: absolute; z-index: -1; width: 260px; height: 260px; right: -90px; top: -110px; border-radius: 50%;
  background: radial-gradient(circle, rgb(126 217 87 / .55), rgb(126 217 87 / 0) 65%); filter: blur(8px); animation: wr-drift 7s ease-in-out infinite alternate; }
.wr-sheet__grab { display: block; width: 40px; height: 5px; margin: 0 auto 10px; border-radius: 3px; background: rgb(255 255 255 / .28); }
.wr-sheet__x { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
  background: rgb(255 255 255 / .10); color: #fff; cursor: pointer; transition: background-color .15s ease; }
.wr-sheet__x:hover { background: rgb(255 255 255 / .18); }
.wr-sheet__x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.wr-sheet__x:focus-visible { outline: 3px solid var(--wr-lime); outline-offset: 2px; }
.wr-sheet__brand { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 6px 52px 0 0; }
.wr-sheet__wm { display: block; height: 40px; width: auto; margin: -4px 0; }
.wr-sheet__yc { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 6px; border-radius: 999px; white-space: nowrap;
  background: rgb(255 255 255 / .08); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14); font: 650 12px/1 var(--text); color: rgb(255 255 255 / .9); }
.wr-sheet__yc img { display: block; width: 16px; height: 16px; border-radius: 3px; }
.wr-sheet__eye { margin: 16px 0 0; font: 700 11px/1.2 var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--wr-lime); }
.wr-sheet__h { margin: 4px 0 0; font: 750 27px/1.08 var(--display); letter-spacing: -.025em; color: #fff; text-wrap: balance; }
.wr-sheet__p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.42; color: rgb(255 255 255 / .74); }
.wr-sheet__figs { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 16px 0 0; padding: 0;
  border-radius: 18px; background: rgb(255 255 255 / .06); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .10);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.wr-sheet__figs li { display: flex; flex-direction: column; min-width: 0; padding: 11px 10px 12px 12px; }
.wr-sheet__figs li + li { box-shadow: inset 1px 0 0 rgb(255 255 255 / .10); }
.wr-sheet__figs b { font: 800 23px/1 var(--display); letter-spacing: -.03em; color: #fff; font-variant-numeric: tabular-nums; }
.wr-sheet__figs li:first-child b { color: var(--wr-lime); }
.wr-sheet__figs span { margin-top: 4px; font-size: 11.5px; line-height: 1.25; color: rgb(255 255 255 / .62); }

.wr-sheet__body { padding: 16px 20px calc(10px + env(safe-area-inset-bottom)); }
.wr-sheet__k { margin: 0 0 8px; font: 700 11px/1.2 var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--sub); }
.wr-sheet__safe { list-style: none; display: grid; gap: 10px; margin: 0; padding: 0; }
.wr-sheet__safe li { display: flex; align-items: center; gap: 12px; min-width: 0; }
.wr-sheet__safe li > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.wr-sheet__ic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: var(--gd);
  background: linear-gradient(140deg, var(--g-soft), color-mix(in srgb, var(--g-soft) 40%, var(--bg))); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--g) 22%, transparent); }
.wr-sheet__ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.wr-sheet__safe b { font: 700 14.5px/1.25 var(--text); color: var(--ink); }
.wr-sheet__safe small, .wr-sheet__safe a { margin-top: 1px; font-size: 12.5px; line-height: 1.3; color: var(--sub); }
.wr-sheet__safe a { text-decoration: underline; text-underline-offset: 2px; }
.wr-sheet__go { display: grid; gap: 8px; margin-top: 16px; }
/* the house popup standard: no choice looks picked; the lead is the stronger outline */
.wr-sheet__take, .wr-sheet__site { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 6px 16px;
  border-radius: 16px; font: 700 15.5px/1.2 var(--text); text-align: center; text-decoration: none; cursor: pointer;
  transition: transform .12s ease, background-color .15s ease, box-shadow .15s ease; -webkit-tap-highlight-color: transparent; }
.wr-sheet__take { border: 0; background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2.5px var(--go); }
.wr-sheet__take[hidden] { display: none; }
.wr-sheet__take:hover { background: color-mix(in srgb, var(--go) 8%, transparent); }
.wr-sheet__site { color: var(--ink); background: transparent; box-shadow: inset 0 0 0 1.5px var(--line); }
.wr-sheet__site:hover { box-shadow: inset 0 0 0 1.5px var(--sub); }
.wr-sheet__take:active, .wr-sheet__site:active { transform: scale(.98); }
.wr-sheet__take svg, .wr-sheet__site svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.wr-sheet__take svg { color: var(--go); }
.wr-sheet__take:focus-visible, .wr-sheet__site:focus-visible, .wr-sheet__link:focus-visible { outline: 3px solid var(--hm); outline-offset: 2px; }
.wr-sheet__foot { display: flex; justify-content: center; gap: 4px 18px; flex-wrap: wrap; margin: 6px 0 0; }
.wr-sheet__link { min-height: 44px; padding: 0 6px; border: 0; background: none; color: var(--sub); font: 600 14px/1 var(--text);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.wr-sheet__link:hover { color: var(--ink); }
@media (max-width: 379.98px) {
  .wr-sheet__hero { padding-left: 16px; padding-right: 16px; }
  .wr-sheet__body { padding-left: 16px; padding-right: 16px; }
  .wr-sheet__h { font-size: 24px; }
  .wr-sheet__figs b { font-size: 20px; }
}
@media (min-width: 640px) {
  .wr-sheet { align-items: center; padding: 24px; }
  .wr-sheet__card { border-radius: 28px; max-height: calc(100dvh - 48px); animation-name: who-pop;
    box-shadow: 0 0 0 1px rgb(126 217 87 / .25), 0 40px 100px -24px rgb(10 16 12 / .55); }
  .wr-sheet__grab { display: none; }
  .wr-sheet__hero { padding: 22px 26px 24px; }
  .wr-sheet__body { padding: 20px 26px 14px; }
  .wr-sheet__go { grid-template-columns: 1.35fr 1fr; }
}
@media (min-width: 900px) {
  .wr-sheet__card { display: grid; grid-template-columns: 1.05fr 1fr; max-width: 900px; overflow: hidden; }
  .wr-sheet__hero { display: flex; flex-direction: column; padding: 30px 32px 30px; overflow-y: auto; }
  .wr-sheet__h { font-size: 34px; }
  .wr-sheet__figs { margin-top: auto; }
  .wr-sheet__p { margin-bottom: 22px; font-size: 15px; }
  .wr-sheet__body { display: flex; flex-direction: column; padding: 30px 30px 16px; overflow-y: auto; }
  .wr-sheet__safe { gap: 14px; }
  .wr-sheet__go { grid-template-columns: 1fr; margin-top: auto; padding-top: 18px; }
}
@keyframes wr-drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(-40px, 30px) scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .wr-sheet__card, .wr-sheet__glow { animation: none; } }