/* wereno.com/handyman: the Handyman.ai announcement, in Handyman.ai's own look inside WeReno's header
   and footer. Light at the top so the WordPress header reads as it does everywhere else, then dark
   bands for the story, lime and lavender for accents, Funnel Display and Funnel Sans for type.
   Scoped to .hl with its own resets: the theme styles bare h1, h2, p and a. */
.hl {
  --ink: #161616; --ink-2: #1c1c1c; --ink-3: #262424; --paper: #faf7f6; --card: #ffffff;
  --lime: #ddf160; --lav: #9f8be7; --lav-ink: #6b55cf; --line: #ebe5e3; --muted: #6c6563; --soft: rgba(250, 247, 246, .72);
  --display: "Funnel Display", ui-sans-serif, system-ui, sans-serif; --text: "Funnel Sans", ui-sans-serif, system-ui, sans-serif;
  width: 100%; overflow: hidden; background: var(--paper); color: var(--ink); font-family: var(--text); -webkit-font-smoothing: antialiased;
}
.hl *, .hl *::before, .hl *::after { box-sizing: border-box; }
.hl h1, .hl h2, .hl h3, .hl p, .hl ul, .hl figure { margin: 0; padding: 0; }
.hl h1, .hl h2, .hl h3 { font-family: var(--display); font-weight: 700; letter-spacing: -.03em; text-wrap: balance; color: inherit; text-transform: none; }
.hl p, .hl li { font-family: var(--text); }
.hl a { text-decoration: none; }
.hl img, .hl video { display: block; max-width: 100%; }
.hl .wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding-inline: 24px; }
.hl .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); font-size: 13px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--lav-ink); }
.hl .dark .eyebrow { color: var(--lime); }
.hl .h2 { font-size: clamp(34px, 5vw, 60px); line-height: 1.02; }
.hl .lead { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; color: var(--muted); max-width: 58ch; }
.hl .dark { background: var(--ink); color: #fff; }
.hl .dark .lead, .hl .dark p { color: var(--soft); }

/* buttons */
.hl .btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 22px 15px 24px; border-radius: 999px; font-family: var(--display);
  font-size: 16px; font-weight: 700; line-height: 1; transition: transform .15s ease, box-shadow .15s ease; }
.hl .btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.hl .btn-ink { background: var(--ink); color: #fff; box-shadow: 0 14px 34px rgba(22, 22, 22, .22); }
.hl .btn-ink .dot { display: grid; place-items: center; width: 26px; height: 26px; margin: -6px -10px -6px 0; border-radius: 50%; background: var(--lime); color: var(--ink); }
.hl .btn-lime { background: linear-gradient(135deg, #e7f77a, #ddf160 45%, #c9e43f); color: var(--ink); box-shadow: 0 16px 40px rgba(221, 241, 96, .32); }
.hl .btn:hover { transform: translateY(-2px); }
.hl .btn-ink:hover { color: #fff; box-shadow: 0 18px 40px rgba(22, 22, 22, .3); }
.hl .btn-lime:hover { color: var(--ink); box-shadow: 0 20px 48px rgba(221, 241, 96, .45); }
.hl .link { font-family: var(--display); font-size: 16px; font-weight: 600; color: var(--lav-ink); text-decoration: underline; text-underline-offset: 4px; }
.hl .dark .link { color: #c9bff6; }
.hl a:focus-visible { outline: 2px solid var(--lav-ink); outline-offset: 3px; border-radius: 6px; }
.hl .dark a:focus-visible { outline-color: var(--lime); }

/* a clip, framed */
.hl .clip { position: relative; overflow: hidden; border-radius: 28px; background: var(--ink-2); box-shadow: 0 30px 70px rgba(22, 22, 22, .18); }
.hl .clip video { width: 100%; height: auto; }
.hl .dark .clip { box-shadow: 0 30px 80px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .06); }
.hl figcaption { margin-top: 12px; font-size: 14px; line-height: 1.45; color: var(--muted); }
.hl .dark figcaption { color: rgba(250, 247, 246, .6); }

/* ── hero ─────────────────────────────────────────────────────────────────────────────────── */
.hl .hero { position: relative; padding: 168px 0 96px; }
.hl .hero::before, .hl .hero::after { content: ""; position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; }
.hl .hero::before { width: 520px; height: 520px; right: -120px; top: 40px; background: rgba(159, 139, 231, .32); }
.hl .hero::after { width: 420px; height: 420px; left: -140px; bottom: -80px; background: rgba(221, 241, 96, .38); }
.hl .hero .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 48px; align-items: center; }
.hl .chip { display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px 8px 10px; border-radius: 999px; background: var(--card);
  box-shadow: 0 0 0 1px var(--line), 0 8px 20px rgba(22, 22, 22, .06); font-family: var(--display); font-size: 14px; font-weight: 600; color: var(--ink); }
.hl .chip i { width: 9px; height: 9px; border-radius: 50%; background: #9ccc2b; box-shadow: 0 0 0 4px rgba(221, 241, 96, .55); }
/* Three lines, broken where the sense breaks: "Meet Handyman.ai," / "the AI assistant" / "for your home." */
.hl .hero h1 { margin-top: 22px; font-size: clamp(38px, 4.9vw, 70px); line-height: 1; text-wrap: initial; }
.hl .hero h1 > span { display: block; white-space: nowrap; }
.hl .hero h1 em { font-style: normal; background: linear-gradient(100deg, #6b55cf, #9f8be7 55%, #6b55cf); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hl .hero .lead { margin-top: 24px; }
.hl .hero .acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 34px; }
/* three proof tiles, each a value over its label, one row at every width */
.hl .proof { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 480px; margin-top: 34px; list-style: none; }
.hl .proof li { display: grid; gap: 3px; align-content: start; min-width: 0; padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, .72);
  box-shadow: inset 0 0 0 1px var(--line), 0 8px 20px rgba(22, 22, 22, .04); }
.hl .proof b { display: flex; align-items: center; gap: 6px; font-family: var(--display); font-size: 20px; font-weight: 700; line-height: 1.1;
  letter-spacing: -.01em; color: var(--ink); white-space: nowrap; }
.hl .proof img { flex: none; width: 16px; height: 16px; border-radius: 4px; }
.hl .proof span { font-size: 13px; font-weight: 500; line-height: 1.3; color: var(--muted); }
.hl .stage { position: relative; }
.hl .stage .clip { aspect-ratio: 800 / 920; max-width: 470px; margin-left: auto; border-radius: 34px; background: #f1ecea;
  box-shadow: 0 40px 90px rgba(22, 22, 22, .2), 0 0 0 1px rgba(22, 22, 22, .05); }
.hl .float { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 9px; padding: 11px 15px; border-radius: 16px;
  background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px rgba(22, 22, 22, .14), inset 0 0 0 1px rgba(255, 255, 255, .9); font-family: var(--display); font-size: 14.5px; font-weight: 600;
  white-space: nowrap; animation: hl-bob 6s ease-in-out infinite; }
.hl .float b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: var(--ink); color: var(--lime); font-size: 13px; }
/* around the mascot and its pills rather than over them: two off the card's top and bottom edges, one over its left */
.hl .float.f1 { left: -6%; top: 9%; }
.hl .float.f2 { right: -4%; top: -4%; animation-delay: -2s; }
.hl .float.f3 { left: 6%; bottom: -4%; animation-delay: -4s; }
/* The film from the mascot card too (the founder, 2026-10-17: "add a play button for the video on this card too"):
   the same lime play as the film's own button, beside the mascot's wrench, opening the same 2-minute film. */
.hl .watch { position: absolute; z-index: 3; right: 9%; top: 41%; display: grid; justify-items: center; gap: 7px; margin: 0; padding: 0;
  border: 0; background: none; cursor: pointer; font-family: var(--display); color: var(--ink); }
.hl .watch .pl { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--lime); color: var(--ink);
  box-shadow: 0 14px 30px -10px rgba(22, 22, 22, .45); animation: hl-pulse 1.8s ease-out infinite; transition: transform .2s ease; }
.hl .watch .pl svg { width: 22px; height: 22px; margin-left: 3px; }
.hl .watch .wt { display: inline-flex; gap: 5px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .92);
  box-shadow: 0 8px 20px rgba(22, 22, 22, .1); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.hl .watch .wt span { font-weight: 500; color: var(--muted); }
.hl .watch:hover .pl { transform: scale(1.06); }
.hl .watch:focus-visible { outline: 3px solid var(--lav-ink); outline-offset: 4px; border-radius: 18px; }
@keyframes hl-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
/* The mascot (the founder, 2026-10-13, with a phone screenshot of this card standing still: "use the animated webp").
   It was a muted clip, and a phone that will not start a muted video shows only its poster. Now it is the animated
   mascot the app and handyman.ai use, which moves wherever an image shows, on the clip's pale dotted ground with its
   green glow, and the clip's three pills are page elements orbiting under him: two sine-eased swings a quarter turn
   apart trace the ellipse, and the pill at the front is the largest and on top. (The clip itself as an animated WebP
   was 1.2 to 2.2 MB at 12 to 15 frames a second; this is the 269 KB mascot and a few lines of CSS.) */
.hl .stage .clip.mascot { background:
    radial-gradient(58% 42% at 50% 40%, rgba(203, 233, 178, .75), rgba(203, 233, 178, 0) 72%),
    radial-gradient(circle, rgba(22, 22, 22, .07) 1px, transparent 1.5px) 0 0 / 22px 22px,
    #f7f8f5; }
.hl .mascot img { position: absolute; left: 28%; top: 20%; width: 44%; height: auto; filter: drop-shadow(0 22px 24px rgba(22, 22, 22, .16));
  animation: hl-bob 5s ease-in-out infinite; }
.hl .orbit { position: absolute; left: 50%; top: 76%; width: 50%; height: 15%; margin: 0; padding: 0; list-style: none; transform: translate(-50%, -50%);
  border: 2px dotted rgba(116, 168, 76, .5); border-radius: 50%; }
.hl .orbit::before { content: ""; position: absolute; inset: 24% 26%; border-radius: 50%; background: rgba(166, 212, 128, .4); filter: blur(12px); }
.hl .orbit li { margin: 0; padding: 0; list-style: none; }
.hl .orb { position: absolute; inset: 0; animation: hl-orb-y 4.5s cubic-bezier(.37, 0, .63, 1) infinite alternate; }
.hl .orb-x { position: absolute; inset: 0; animation: hl-orb-x 4.5s cubic-bezier(.37, 0, .63, 1) infinite alternate; }
/* a nine-second turn, clockwise: Remembers at the front, then Repairs, then Reminds (the x swing runs a quarter turn ahead) */
.hl .orb.o1 { animation-delay: -4.5s; } .hl .orb.o1 .orb-x { animation-delay: -6.75s; }
.hl .orb.o2 { animation-delay: -1.5s; } .hl .orb.o2 .orb-x { animation-delay: -3.75s; }
.hl .orb.o3 { animation-delay: -7.5s; } .hl .orb.o3 .orb-x { animation-delay: -9.75s; }
@keyframes hl-orb-y { from { transform: translateY(-50%) scale(.8); opacity: .55; z-index: 1; } to { transform: translateY(50%) scale(1.06); opacity: 1; z-index: 3; } }
@keyframes hl-orb-x { from { transform: translateX(-50%); } to { transform: translateX(50%); } }
.hl .pill { position: absolute; left: 50%; top: 50%; display: inline-flex; align-items: center; gap: 8px; padding: 6px 15px 6px 6px; border-radius: 999px;
  background: #fff; box-shadow: 0 12px 28px rgba(22, 22, 22, .1), 0 0 0 1px rgba(22, 22, 22, .04); transform: translate(-50%, -50%);
  font-family: var(--display); font-size: 15px; font-weight: 700; line-height: 1; color: #474747; white-space: nowrap; }
.hl .pill .ic { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #eaf4e0; color: #5b9a35; }
.hl .pill .ic.warm { background: #fdeadf; color: #df6d35; }
.hl .pill .ic svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── the film: handyman.ai's launch film, front and centre under the hero ──────────────────── */
/* The founder, 2026-10-13: "Now let's put the Twitter video on the wereno-ca site cta popup and /handyman page". A muted
   preview of the film (from handyman.ai, so a new cut shows up here by itself) in a 16:9 frame, with handyman.ai's
   "See how it works · 2 min" button over its bottom edge. A tap plays the film with its sound: in the frame on a laptop,
   in a dark room over the page on a phone (wr-handyman-promo.js, 3). */
.hl .film { padding: 0 0 104px; }
.hl .reel { position: relative; max-width: 1000px; margin: 0 auto; padding-bottom: 34px; }
.hl .screen { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border: 6px solid #fff; border-radius: 30px; background: #f0f5f0; cursor: pointer;
  box-shadow: 0 44px 90px -30px rgba(22, 22, 22, .35), 0 0 0 1px rgba(22, 22, 22, .06); }
.hl .screen > video { width: 100%; height: 100%; object-fit: cover; }
.hl .reel.is-film .screen { cursor: auto; }
.hl button.go { position: absolute; left: 50%; bottom: 0; z-index: 5; display: inline-flex; align-items: center; gap: 14px; margin: 0; padding: 9px 30px 9px 9px;
  border: 0; border-radius: 999px; background: var(--ink); color: #fff; font-family: var(--display); font-size: 21px; font-weight: 700; line-height: 1;
  letter-spacing: -.01em; white-space: nowrap; cursor: pointer; transform: translateX(-50%); box-shadow: 0 22px 44px -16px rgba(22, 22, 22, .6);
  transition: transform .2s ease, box-shadow .2s ease; }
.hl button.go:hover { transform: translateX(-50%) translateY(-3px); box-shadow: 0 28px 52px -16px rgba(22, 22, 22, .65); }
.hl button.go:focus-visible { outline: 3px solid var(--lav-ink); outline-offset: 4px; }
.hl button.go .pl { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--lime); color: var(--ink);
  animation: hl-pulse 1.8s ease-out infinite; }
.hl button.go .pl svg { width: 24px; height: 24px; margin-left: 3px; }
.hl button.go .mt { margin-left: -4px; font-weight: 500; color: rgba(255, 255, 255, .62); }
.hl button.go .mt::before { content: "\00b7"; margin-right: 10px; }
.hl .reel.is-film button.go { visibility: hidden; }
@keyframes hl-pulse { from { box-shadow: 0 0 0 0 rgba(221, 241, 96, .7); } to { box-shadow: 0 0 0 16px rgba(221, 241, 96, 0); } }

/* ── the note: WeReno is still WeReno ──────────────────────────────────────────────────────── */
.hl .note { padding: 0 0 96px; }
.hl .note .card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px; align-items: center; padding: 26px 30px; border-radius: 24px;
  background: var(--card); box-shadow: 0 0 0 1px var(--line), 0 20px 50px rgba(22, 22, 22, .06); }
.hl .note .card img { width: 120px; height: auto; }
.hl .note h3 { font-size: 22px; line-height: 1.2; }
.hl .note p { margin-top: 6px; font-size: 16px; line-height: 1.55; color: var(--muted); }

/* ── why ──────────────────────────────────────────────────────────────────────────────────── */
.hl .why { padding: 110px 0; }
.hl .why .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.hl .why h2 { margin-top: 16px; }
.hl .story { display: grid; gap: 18px; margin-top: 28px; }
.hl .story p { font-size: 18px; line-height: 1.62; }
.hl .story p strong { color: #fff; font-weight: 600; }
.hl .why .media { display: grid; gap: 22px; position: sticky; top: 110px; }
.hl .why .media .clip.wide video { aspect-ratio: 800 / 680; object-fit: cover; }
.hl .why .media .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ── how ──────────────────────────────────────────────────────────────────────────────────── */
.hl .how { padding: 110px 0; }
.hl .how .head { display: grid; gap: 16px; max-width: 760px; }
.hl .steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 52px; counter-reset: s; list-style: none; }
.hl .step { counter-increment: s; display: flex; flex-direction: column; gap: 18px; padding: 16px 16px 24px; border-radius: 30px; background: var(--card);
  box-shadow: 0 0 0 1px var(--line), 0 24px 60px rgba(22, 22, 22, .07); }
.hl .step .clip { aspect-ratio: 1 / 1; border-radius: 22px; box-shadow: none; }
.hl .step .clip video { height: 100%; object-fit: cover; }
.hl .step .n { flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: var(--lime);
  font-family: var(--display); font-weight: 700; font-size: 15px; }
.hl .step .n::before { content: counter(s); }
.hl .step h3 { font-size: 24px; line-height: 1.15; padding-inline: 8px; }
.hl .step p { font-size: 16px; line-height: 1.55; color: var(--muted); padding-inline: 8px; }
.hl .step .top { display: flex; align-items: center; gap: 12px; padding-inline: 8px; }

/* ── care ─────────────────────────────────────────────────────────────────────────────────── */
.hl .care { padding: 110px 0; }
.hl .care .wrap { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; align-items: center; }
.hl .care .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.hl .care .pair .clip:nth-child(2) { margin-top: 48px; }
.hl .care h2 { margin-top: 16px; }
.hl .care .lead { margin-top: 22px; }
.hl .tags { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 30px; list-style: none; }
.hl .tags li { padding: 9px 14px; border-radius: 999px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
  font-size: 14px; font-weight: 500; color: rgba(250, 247, 246, .86); }
.hl .tags li::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--lime); vertical-align: 1px; }

/* ── crew ─────────────────────────────────────────────────────────────────────────────────── */
.hl .crew { padding: 110px 0 96px; text-align: center; }
.hl .crew .head { display: grid; justify-items: center; gap: 16px; max-width: 760px; margin: 0 auto; }
.hl .crew .lead { margin-inline: auto; }
.hl .bots { display: flex; align-items: flex-end; justify-content: center; gap: clamp(8px, 3vw, 40px); margin-top: 48px; }
.hl .bot { display: grid; justify-items: center; gap: 12px; }
.hl .bot img { width: clamp(84px, 13vw, 150px); height: auto; filter: drop-shadow(0 18px 24px rgba(22, 22, 22, .18)); animation: hl-bob 5.5s ease-in-out infinite; }
.hl .bot:nth-child(2) img { animation-delay: -1.4s; }
.hl .bot:nth-child(4) img { animation-delay: -2.8s; }
.hl .bot:nth-child(5) img { animation-delay: -4.2s; }
.hl .bot.lead-bot img { width: clamp(150px, 22vw, 260px); }
.hl .bot span { font-family: var(--display); font-size: 14px; font-weight: 600; color: var(--muted); }
.hl .bot.lead-bot span { padding: 6px 12px; border-radius: 999px; background: var(--ink); color: var(--lime); }
.hl .badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 48px; }
.hl .badges span { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: var(--card);
  box-shadow: 0 0 0 1px var(--line); font-family: var(--display); font-size: 15px; font-weight: 600; }
.hl .badges img { width: 18px; height: 18px; border-radius: 4px; }

/* ── the last word ────────────────────────────────────────────────────────────────────────── */
.hl .cta { position: relative; padding: 110px 0; }
.hl .cta::before { content: ""; position: absolute; width: 640px; height: 640px; left: 50%; top: 50%; transform: translate(-80%, -50%); border-radius: 50%;
  background: rgba(221, 241, 96, .14); filter: blur(90px); pointer-events: none; }
.hl .cta .wrap { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; align-items: center; }
.hl .cta h2 { font-size: clamp(38px, 5.6vw, 72px); line-height: 1; }
.hl .cta .lead { margin-top: 22px; }
.hl .cta .acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 34px; }
.hl .cta .small { margin-top: 26px; font-size: 14px; color: rgba(250, 247, 246, .55); }
.hl .cta .clip { aspect-ratio: 1 / 1; max-width: 420px; margin-left: auto; }

/* ── narrower screens ─────────────────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .hl .hero { padding: 140px 0 72px; }
  .hl .hero .wrap, .hl .why .wrap, .hl .care .wrap, .hl .cta .wrap { grid-template-columns: 1fr; gap: 44px; }
  .hl .stage { width: 100%; max-width: 470px; margin-inline: auto; }   /* the floats sit on the card, not on the full-width column */
  .hl .stage .clip { margin: 0 auto; }
  .hl .why .media { position: static; }
  .hl .steps { grid-template-columns: 1fr; max-width: 520px; }
  .hl .cta .clip { margin: 0 auto; }
}
@media (max-width: 640px) {
  .hl .wrap { padding-inline: 18px; }
  .hl .hero { padding: 120px 0 56px; }
  .hl .hero h1 { font-size: clamp(34px, 9.6vw, 44px); }
  .hl .hero h1 > span:first-child { white-space: normal; }
  .hl .proof { gap: 8px; max-width: none; }
  .hl .proof li { padding: 10px 10px 11px; border-radius: 14px; }
  .hl .proof b { font-size: 16.5px; gap: 5px; }
  .hl .proof img { width: 14px; height: 14px; }
  .hl .proof span { font-size: 11.5px; }
  .hl .float { display: none; }
  .hl .pill { gap: 7px; padding: 5px 13px 5px 5px; font-size: 14px; }
  .hl .pill .ic { width: 26px; height: 26px; }
  .hl .pill .ic svg { width: 14px; height: 14px; }
  .hl .orbit { width: 52%; }
  .hl .film { padding-bottom: 64px; }
  .hl .reel { padding-bottom: 26px; }
  .hl .screen { border-width: 4px; border-radius: 22px; }
  .hl button.go { gap: 10px; padding: 7px 21px 7px 7px; font-size: 17px; }
  .hl button.go .pl { width: 44px; height: 44px; }
  .hl button.go .pl svg { width: 19px; height: 19px; margin-left: 2px; }
  .hl button.go .mt::before { margin-right: 7px; }
  .hl .why, .hl .how, .hl .care, .hl .cta { padding: 76px 0; }
  .hl .note { padding-bottom: 64px; }
  .hl .note .card { grid-template-columns: 1fr; gap: 14px; padding: 22px; }
  .hl .note .card img { width: 96px; }
  .hl .story p { font-size: 16.5px; }
  .hl .care .pair .clip:nth-child(2) { margin-top: 28px; }
  .hl .bots { flex-wrap: wrap; row-gap: 18px; }
  .hl .bot.lead-bot { order: -1; flex: 0 0 100%; }
  .hl .bot img { width: 84px; }
  .hl .btn { padding: 14px 20px 14px 22px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .hl .float, .hl .bot img, .hl .mascot img, .hl button.go .pl, .hl .watch .pl { animation: none; }
  /* the pills hold where the turn starts (the mascot's own still frame comes from the <picture>) */
  .hl .orb, .hl .orb-x { animation-play-state: paused; }
  .hl .btn, .hl button.go { transition: none; }
}