/* HunterViz stage: the shared look of hunterviz.com (static/index.html) and the app's /app/ask.
 *
 * Load Barlow (body text, buttons, the robots' bubbles) and, where a .hv-card heading shows, Barlow Condensed:
 *   https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;800&family=Barlow:wght@400;500;600&display=swap
 * Everything is upright: no italics, skews or slanted shapes on buttons and links.
 *
 * Expected markup (classes are the contract; ids are up to the page):
 *
 *   <body class="hv-stage-body">
 *     <div class="hv-bots" aria-hidden="true"></div>                          HVBots.mount(div, { anchor: promptbox })
 *                                                                             (it adds canvas.hv-bots-fx and div.hv-bots-talk,
 *                                                                             the speech bubbles, after itself)
 *     <div class="hv-stage">
 *       <header class="hv-top">
 *         <a class="hv-brand" href="/">                                       small lockup (optional)
 *           <picture><source srcset="/assets/hv-mark-96.webp" type="image/webp">
 *             <img class="hv-brand-mark" src="/assets/hv-mark-96.png" alt="" width="201" height="96"></picture>
 *           <picture><source srcset="/assets/hunterviz-wordmark-56.webp" type="image/webp">
 *             <img class="hv-brand-word" src="/assets/hunterviz-wordmark-56.png" alt="HunterViz" width="473" height="56"></picture>
 *         </a>
 *         <nav class="hv-auth"><a class="hv-signin" href="...">Sign in</a><a class="hv-signup" href="...">Sign up</a></nav>
 *       </header>
 *       <main class="hv-main">
 *         <h1 class="hv-logo"> (large lockup, optional)
 *           <picture class="hv-logo-mark">...hv-mark-240...</picture>
 *           <picture class="hv-logo-word">...hunterviz-wordmark-56...</picture></h1>
 *         <div class="hv-glow-wrap">                                          the prompt box and the faint light behind it
 *           <div class="hv-glow" aria-hidden="true"></div>
 *           <form class="hv-ask">                                             leave room above it for the robots
 *             <div class="hv-promptbox">
 *               <input class="hv-prompt-input" type="text" maxlength="2000">
 *               <button class="hv-ask-btn" type="submit" aria-label="Ask"><svg>arrow</svg></button>
 *             </div>
 *           </form>
 *         </div>
 *         <div class="hv-examples"><button class="hv-example" type="button">...</button> x3</div>
 *         <section class="hv-card">...</section>                              frosted card, e.g. sign-in
 *       </main>
 *     </div>
 *   </body>
 *
 * Depth order (front to back): .hv-top, .hv-bots-talk (speech bubbles, placed clear of everything below),
 * .hv-bots-fx, prompt box / examples / card, .hv-bots (the robots), .hv-logo, .hv-glow. .hv-stage, .hv-main and
 * .hv-glow-wrap must not create stacking contexts (no z-index, transform, filter or opacity < 1 on them), so the
 * robots can pass behind the prompt box and in front of the logo, and the glow stays behind both.
 *
 * HVTilt.mount(promptbox, { root: document.documentElement }) (hv-tilt.js) drives --hv-tilt-x/-y, --hv-glare-x/-y
 * and --hv-px/-py.
 * Classes the robots add for effects: .hv-fx-scan (prompt box), .hv-fx-charged (ask button), .hv-sent (input).
 * The page adds: .hv-shake (prompt box, empty submit), .hv-leaving (body, while leaving for the app).
 */

:root {
  --hv-red: #d7261e;
  --hv-red-deep: #a8130f;
  --hv-orange: #ee5a24;
  --hv-orange-hot: #ff7a3d;
  --hv-blue: #1f73be;
  --hv-blue-deep: #12408e;
  --hv-blue-light: #3c9bdc;
  --hv-ice: #a9d8f7;

  --hv-space: #03050b;
  --hv-space-2: #070d1c;
  --hv-space-3: #0d1730;
  --hv-text: #e9eef7;
  --hv-text-2: #b9c4d8;
  --hv-text-3: #7f8ca5;

  --hv-slab: #fdfcf9;
  --hv-slab-2: #f0eee8;
  --hv-ink: #14161c;
  --hv-ink-2: #464b57;
  --hv-ink-3: #868b96;

  --hv-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --hv-body: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
  --hv-ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Robot height; hv-bots.js uses the same formula. */
  --hv-bot-size: clamp(56px, min(15vw, 10.5vh), 96px);
}

html { background: var(--hv-space); -webkit-text-size-adjust: 100%; }
.hv-stage-body {
  margin: 0;
  min-height: 100%;
  background: var(--hv-space);
  color: var(--hv-text);
  font: 400 16px/1.45 var(--hv-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
.hv-stage-body *, .hv-stage-body *::before, .hv-stage-body *::after { box-sizing: border-box; }
.hv-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Layers ---------- */
.hv-bots {
  position: fixed; inset: 0; z-index: 2;
  width: auto; height: auto; max-width: none;
  pointer-events: none; overflow: hidden;
}
.hv-bots-fx { position: fixed; left: 0; top: 0; z-index: 4; width: 100%; height: 100%; pointer-events: none; }
.hv-bot { position: absolute; left: 0; top: 0; pointer-events: none; transform-origin: 50% 50%; }
.hv-bot svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* Grab a robot and throw it: touch-action only here, so a phone still scrolls everywhere else. */
.hv-bot .hv-bot-hit { pointer-events: auto; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.hv-bot .hv-bot-hit.hv-grabbing { cursor: grabbing; }
.hv-bots-ghost {
  position: fixed; z-index: 4; left: 0; top: 0; margin: 0;
  pointer-events: none; white-space: pre; transform-origin: 50% 50%;
  color: var(--hv-ink);
}

/* The robots' only words: tiny speech bubbles (and a little sign) in the robot's color.
   They live in .hv-bots-talk, over the page, and hv-bots.js places them clear of the prompt box,
   the examples, the card, the top bar and the logo. Decorative, like the robots (aria-hidden). */
.hv-bubble, .hv-sign {
  position: absolute; left: 0; top: 0; z-index: 1;
  --hv-edge: var(--hv-orange);
  padding: 7px 12px 8px;
  border-radius: 12px;
  background: var(--hv-slab);
  color: var(--hv-ink);
  font: 600 14px/1.2 var(--hv-body);
  letter-spacing: 0.005em;
  white-space: nowrap;
  box-shadow: 0 0 0 2px var(--hv-edge), 0 12px 26px -12px rgba(0, 0, 0, 0.85);
  pointer-events: none; user-select: none; -webkit-user-select: none;
  opacity: 0;
}
.hv-bubble-v, .hv-sign-v { --hv-edge: var(--hv-blue-light); }
.hv-bubble-tail {
  position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px;
  background: var(--hv-slab);
  rotate: 45deg;
}
.hv-tail-down .hv-bubble-tail { top: 100%; box-shadow: 2px 2px 0 0 var(--hv-edge); }
.hv-tail-left .hv-bubble-tail { left: 0; box-shadow: -2px 2px 0 0 var(--hv-edge); }
.hv-tail-right .hv-bubble-tail { left: 100%; box-shadow: 2px -2px 0 0 var(--hv-edge); }
.hv-sign {
  padding: 6px 12px 7px;
  border-radius: 7px;
  font-size: 15px;
}
.hv-sign::after {
  /* the stick the robot holds it by */
  content: ""; position: absolute; left: 50%; top: 100%;
  width: 3px; height: var(--hv-stick, 24px); margin-left: -1.5px;
  border-radius: 2px;
  background: #3a4152;
}
@media (max-width: 640px) {
  .hv-bubble { font-size: 13px; padding: 6px 10px 7px; }
  .hv-sign { font-size: 13px; padding: 5px 9px 6px; }
}

/* Brief glows when a robot knocks on the box, points at an example, the Ask button or Sign up. */
.hv-promptbox.hv-fx-knock { animation: hv-knock 0.9s ease-out; }
@keyframes hv-knock {
  0% { box-shadow: var(--hv-box-shadow), 0 0 0 0 rgba(255, 186, 120, 0), 0 0 0 0 rgba(238, 90, 36, 0); }
  20% { box-shadow: var(--hv-box-shadow), 0 0 0 3px rgba(255, 186, 120, 0.85), 0 0 38px 6px rgba(238, 90, 36, 0.38); }
  100% { box-shadow: var(--hv-box-shadow), 0 0 0 0 rgba(255, 186, 120, 0), 0 0 0 0 rgba(238, 90, 36, 0); }
}
.hv-fx-pulse { animation: hv-pulse 0.9s ease-in-out 2; }
@keyframes hv-pulse {
  50% {
    color: #fff; border-color: rgba(150, 205, 250, 0.8);
    box-shadow: 0 12px 26px -16px rgba(0, 0, 0, 0.9), 0 0 0 2px rgba(60, 155, 220, 0.45), 0 0 24px 2px rgba(60, 155, 220, 0.32);
  }
}
.hv-fx-glow { animation: hv-glow 1.1s ease-in-out 2; }
@keyframes hv-glow {
  50% { box-shadow: 0 0 0 3px rgba(255, 200, 160, 0.9), 0 0 32px 8px rgba(238, 90, 36, 0.55); filter: brightness(1.08); }
}
.hv-ask-btn.hv-fx-ready { animation: hv-ready 1s ease-in-out 2; }
@keyframes hv-ready {
  50% { box-shadow: var(--hv-btn-shadow), 0 0 0 3px rgba(190, 230, 255, 0.9), 0 0 28px 6px rgba(80, 170, 255, 0.5); }
}

.hv-stage {
  position: relative;
  display: flex; flex-direction: column;
  min-height: 100vh; min-height: 100svh;
}
.hv-main {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0 16px clamp(28px, 9vh, 100px);
  overflow-x: clip; /* the glow is wider than a phone; clip here, not on body (that only reaches the viewport) */
}

/* ---------- Top bar ---------- */
.hv-top {
  position: relative; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: clamp(14px, 2.4vh, 22px) clamp(16px, 3vw, 34px);
}
.hv-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; border-radius: 6px; }
.hv-brand img { display: block; width: auto; }
.hv-brand-mark { height: 30px; }
.hv-brand-word { height: 16px; }
.hv-auth { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.hv-signin, .hv-signup {
  display: inline-flex; align-items: center;
  font: 600 15px/1 var(--hv-body);
  letter-spacing: 0; text-transform: none; text-decoration: none;
  white-space: nowrap;
}
.hv-signin { color: var(--hv-text-2); padding: 11px 14px; border-radius: 10px; transition: color 0.15s; }
.hv-signin:hover { color: #fff; }
.hv-signup {
  color: #fff;
  padding: 11px 18px;
  border-radius: 10px;
  background: linear-gradient(100deg, var(--hv-orange-hot), var(--hv-orange) 35%, var(--hv-red) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 8px 18px -10px rgba(215, 38, 30, 0.75);
  transition: filter 0.15s, box-shadow 0.3s;
}
.hv-signup:hover { filter: brightness(1.08) saturate(1.05); }
.hv-signin:focus-visible, .hv-signup:focus-visible, .hv-brand:focus-visible { outline: 2px solid var(--hv-blue-light); outline-offset: 2px; }

/* ---------- Large logo ---------- */
.hv-logo {
  position: relative; z-index: 1;
  margin: 0;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(10px, 1.7vh, 18px);
  translate: calc(var(--hv-px, 0) * -16px) calc(var(--hv-py, 0) * -10px);
}
.hv-logo picture, .hv-logo img { display: block; }
.hv-logo-mark img {
  height: clamp(64px, min(17vw, 15vh), 138px); width: auto;
  filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.55));
}
.hv-logo-word img { height: clamp(14px, min(3.7vw, 2.8vh), 25px); width: auto; }

/* ---------- The light behind the prompt box ---------- */
/* A faint two-tone glow, orange on the left and blue on the right like the box's own edge glows.
   .hv-glow-wrap is the box's size and no stacking context, so the glow sits behind the robots and the logo. */
.hv-glow-wrap { position: relative; width: min(760px, 100%); }
.hv-glow {
  position: absolute; z-index: 0; left: 50%; top: 50%;
  width: calc(100% + 460px); height: calc(100% + 340px);
  translate: -50% -50%;
  pointer-events: none;
  background:
    radial-gradient(closest-side at 31% 50%, rgba(238, 90, 36, 0.18), rgba(238, 90, 36, 0.065) 55%, rgba(238, 90, 36, 0)),
    radial-gradient(closest-side at 69% 50%, rgba(60, 155, 220, 0.18), rgba(60, 155, 220, 0.065) 55%, rgba(60, 155, 220, 0));
  animation: hv-fade 1.6s ease 0.15s both;
}

/* ---------- Prompt box ---------- */
/* z-index here too: animations on .hv-ask make it a stacking context, and it must stay above .hv-bots. */
.hv-ask { position: relative; z-index: 3; width: min(760px, 100%); margin: 0; }
.hv-promptbox {
  --hv-tilt-x: 0deg; --hv-tilt-y: 0deg; --hv-glare-x: 30%; --hv-glare-y: 0%;
  --hv-box-h: 76px;
  --hv-box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -2px 0 rgba(20, 22, 28, 0.07),
    0 1px 0 #d4d5db,
    0 3px 0 #a9adb9,
    0 4px 1px rgba(40, 46, 62, 0.6),
    -18px 0 40px -12px rgba(238, 90, 36, 0.8),
    18px 0 40px -12px rgba(60, 155, 220, 0.85),
    0 46px 90px -30px rgba(0, 0, 0, 0.95),
    0 0 0 1px rgba(255, 255, 255, 0.4);
  position: relative; z-index: 3;
  display: flex; align-items: center; gap: 10px;
  width: 100%; height: var(--hv-box-h);
  padding: 0 10px 0 26px;
  border-radius: 20px;
  color: var(--hv-ink);
  background:
    radial-gradient(140% 260% at var(--hv-glare-x) var(--hv-glare-y), rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 42%),
    linear-gradient(180deg, var(--hv-slab) 0%, var(--hv-slab-2) 100%);
  box-shadow: var(--hv-box-shadow);
  transform: perspective(1100px) rotateX(var(--hv-tilt-x)) rotateY(var(--hv-tilt-y));
  transition: box-shadow 0.3s ease;
}
.hv-promptbox:focus-within {
  box-shadow: var(--hv-box-shadow), 0 0 0 3px rgba(60, 155, 220, 0.7), 0 0 34px 2px rgba(60, 155, 220, 0.35);
}
.hv-prompt-input {
  flex: 1; min-width: 0; height: 100%;
  margin: 0; padding: 0;
  border: 0; outline: 0; background: transparent; border-radius: 0;
  font: 500 21px/1.2 var(--hv-body);
  letter-spacing: 0.005em;
  color: var(--hv-ink);
  caret-color: var(--hv-red);
  -webkit-appearance: none; appearance: none;
}
.hv-prompt-input::placeholder { color: var(--hv-ink-3); font-weight: 400; opacity: 1; }
.hv-prompt-input.hv-sent { color: transparent; caret-color: transparent; }
.hv-ask-btn {
  --hv-btn-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), inset 0 -2px 0 rgba(0, 0, 0, 0.2), 0 8px 18px -6px rgba(215, 38, 30, 0.65);
  flex: none; position: relative;
  display: grid; place-items: center;
  width: 62px; height: 56px; margin: 0; padding: 0;
  border: 0; border-radius: 14px; cursor: pointer;
  color: #fff;
  background: linear-gradient(135deg, var(--hv-orange-hot) 0%, var(--hv-orange) 32%, var(--hv-red) 76%, var(--hv-red-deep) 100%);
  box-shadow: var(--hv-btn-shadow);
  transition: filter 0.2s, opacity 0.2s, scale 0.12s;
}
.hv-ask-btn svg { display: block; width: 26px; height: 26px; }
.hv-ask-btn:hover { filter: brightness(1.07) saturate(1.06); }
.hv-ask-btn:active { scale: 0.95; }
.hv-ask-btn:focus-visible { outline: 3px solid var(--hv-blue-light); outline-offset: 3px; }

/* ---------- Example prompts ---------- */
.hv-examples {
  position: relative; z-index: 3;
  display: grid; gap: 10px;
  width: max-content; max-width: 100%;
  margin-top: clamp(18px, 3vh, 26px);
}
.hv-example {
  display: flex; align-items: center; gap: 12px;
  width: 100%; margin: 0;
  padding: 10px 18px 10px 14px;
  border: 1px solid rgba(150, 180, 225, 0.17);
  border-radius: 12px;
  background: rgba(7, 12, 25, 0.66);
  box-shadow: 0 12px 26px -16px rgba(0, 0, 0, 0.9);
  color: #d9e2f0;
  font: 500 16px/1.3 var(--hv-body);
  text-align: left;
  cursor: pointer;
  transition: color 0.18s, background-color 0.18s, border-color 0.18s, translate 0.25s var(--hv-ease);
}
.hv-example::before {
  /* a small straight two-tone mark, orange then blue like the logo */
  content: ""; flex: none;
  width: 14px; height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, var(--hv-orange) 0 50%, var(--hv-blue-light) 50% 100%);
}
.hv-example:hover, .hv-example:focus-visible {
  color: #fff;
  background: rgba(14, 26, 52, 0.86);
  border-color: rgba(150, 195, 245, 0.45);
  translate: 0 -1px;
}
.hv-example:focus-visible { outline: 2px solid var(--hv-blue-light); outline-offset: 2px; }

/* ---------- Frosted card (the app's sign-in card) ---------- */
.hv-card {
  position: relative; z-index: 3;
  width: min(420px, 100%);
  padding: 28px 28px 24px;
  border-radius: 20px;
  color: var(--hv-ink);
  background: linear-gradient(180deg, rgba(253, 252, 249, 0.94), rgba(240, 238, 232, 0.9));
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  box-shadow:
    inset 0 1px 0 #fff,
    0 0 0 1px rgba(255, 255, 255, 0.45),
    -30px 6px 70px -34px rgba(238, 90, 36, 0.8),
    30px 6px 70px -34px rgba(60, 155, 220, 0.85),
    0 50px 100px -34px rgba(0, 0, 0, 0.95);
}
.hv-card h2 { margin: 0 0 6px; font: 800 27px/1.1 var(--hv-display); letter-spacing: 0.005em; text-transform: none; }
.hv-card p { margin: 0 0 16px; color: var(--hv-ink-2); }
.hv-card label { display: block; margin: 12px 0 6px; font: 600 14px/1.2 var(--hv-body); color: var(--hv-ink-2); }
.hv-card input:not([type="checkbox"]):not([type="radio"]) {
  width: 100%; height: 46px; padding: 0 14px;
  border: 1.5px solid #cfd2da; border-radius: 10px;
  background: #fff; color: var(--hv-ink);
  font: 500 16px/1 var(--hv-body);
}
.hv-card input:focus { outline: none; border-color: var(--hv-blue-light); box-shadow: 0 0 0 3px rgba(60, 155, 220, 0.3); }
.hv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: 48px; margin-top: 16px; padding: 0 18px;
  border: 0; border-radius: 12px; cursor: pointer;
  font: 600 16px/1 var(--hv-body); letter-spacing: 0; text-transform: none;
  color: #fff; text-decoration: none;
  background: linear-gradient(110deg, var(--hv-orange-hot), var(--hv-orange) 35%, var(--hv-red));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 10px 20px -10px rgba(215, 38, 30, 0.7);
}
.hv-btn:hover { filter: brightness(1.06); }
.hv-btn:focus-visible { outline: 3px solid var(--hv-blue-light); outline-offset: 2px; }
.hv-btn-quiet {
  color: var(--hv-ink); background: #fff;
  box-shadow: inset 0 0 0 1.5px #cfd2da;
  font: 600 16px/1 var(--hv-body); letter-spacing: 0; text-transform: none;
}

/* ---------- Effects the robots and the page trigger ---------- */
.hv-promptbox.hv-fx-scan::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(100deg,
    rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 41%,
    rgba(238, 90, 36, 0.16) 45%, rgba(255, 196, 150, 0.55) 49%, rgba(255, 255, 255, 0.9) 50%,
    rgba(130, 200, 250, 0.5) 51.5%, rgba(60, 155, 220, 0.14) 55%,
    rgba(255, 255, 255, 0) 59%, rgba(255, 255, 255, 0) 100%);
  background-size: 260% 100%;
  background-repeat: no-repeat;
  animation: hv-scan 0.95s cubic-bezier(0.45, 0, 0.4, 1) forwards;
}
@keyframes hv-scan { from { background-position: 100% 0; } to { background-position: 0% 0; } }

.hv-ask-btn.hv-fx-charged { animation: hv-charge 1.5s ease-out; }
@keyframes hv-charge {
  0% { box-shadow: var(--hv-btn-shadow), 0 0 0 0 rgba(150, 215, 255, 0), 0 0 0 0 rgba(80, 170, 255, 0); }
  14% { box-shadow: var(--hv-btn-shadow), 0 0 0 3px rgba(190, 230, 255, 0.95), 0 0 38px 10px rgba(80, 170, 255, 0.75); filter: brightness(1.22); }
  100% { box-shadow: var(--hv-btn-shadow), 0 0 0 0 rgba(150, 215, 255, 0), 0 0 0 0 rgba(80, 170, 255, 0); filter: brightness(1); }
}

.hv-promptbox.hv-shake { animation: hv-shake 0.44s cubic-bezier(0.36, 0.07, 0.19, 0.97); }
@keyframes hv-shake {
  15% { translate: -9px 0; }
  32% { translate: 8px 0; }
  50% { translate: -6px 0; }
  68% { translate: 4px 0; }
  85% { translate: -2px 0; }
  100% { translate: 0 0; }
}

/* Entrance: the page adds .hv-in to elements it wants to rise out of depth. */
.hv-in { animation: hv-in 0.8s var(--hv-ease) both; animation-delay: var(--hv-in-delay, 0s); }
@keyframes hv-in { from { opacity: 0; scale: 0.94; } to { opacity: 1; scale: 1; } }

/* Leaving: everything rushes past the camera while the robots carry the prompt off. */
.hv-leaving .hv-logo, .hv-leaving .hv-ask, .hv-leaving .hv-examples, .hv-leaving .hv-top, .hv-leaving .hv-card {
  animation: hv-out 0.7s linear forwards;
}
.hv-leaving .hv-ask { animation-delay: 0.26s; animation-duration: 0.6s; }
.hv-leaving .hv-glow { animation: hv-fade-out 0.8s ease 0.2s forwards; }
@keyframes hv-out {
  0% { opacity: 1; scale: 1; animation-timing-function: cubic-bezier(0.3, 0, 0.7, 1); }
  45% { opacity: 0.35; scale: 1.06; animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.6); }
  100% { opacity: 0; scale: 1.32; }
}

/* ---------- Small screens ---------- */
@media (max-width: 640px) {
  .hv-top { padding: 12px 14px; }
  .hv-signin, .hv-signup { font-size: 14.5px; }
  .hv-signin { padding: 10px 10px; }
  .hv-signup { padding: 10px 14px; }
  .hv-promptbox { --hv-box-h: 62px; border-radius: 16px; padding: 0 8px 0 18px; gap: 8px; }
  .hv-prompt-input { font-size: 17px; }
  .hv-ask-btn { width: 52px; height: 46px; border-radius: 12px; }
  .hv-ask-btn svg { width: 22px; height: 22px; }
  .hv-examples { gap: 8px; }
  .hv-example { width: 100%; padding: 10px 14px 10px 12px; font-size: 15px; gap: 10px; }
  .hv-card { padding: 22px 18px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .hv-promptbox { transform: none; transition: none; }
  .hv-logo { translate: none; }
  .hv-in { animation: hv-fade 0.3s ease both; }
  .hv-leaving .hv-logo, .hv-leaving .hv-ask, .hv-leaving .hv-examples, .hv-leaving .hv-top, .hv-leaving .hv-card {
    animation: hv-fade-out 0.25s ease forwards;
  }
  .hv-promptbox.hv-shake { animation: none; }
  .hv-promptbox.hv-fx-scan::after, .hv-ask-btn.hv-fx-charged { animation: none; }
  /* the robots' nudges hold still: a steady highlight instead of a pulse */
  .hv-promptbox.hv-fx-knock { animation: none; box-shadow: var(--hv-box-shadow), 0 0 0 3px rgba(255, 186, 120, 0.85); }
  .hv-fx-pulse { animation: none; color: #fff; border-color: rgba(150, 205, 250, 0.8); }
  .hv-fx-glow { animation: none; box-shadow: 0 0 0 3px rgba(255, 200, 160, 0.9); }
  .hv-ask-btn.hv-fx-ready { animation: none; box-shadow: var(--hv-btn-shadow), 0 0 0 3px rgba(190, 230, 255, 0.9); }
  .hv-example, .hv-ask-btn, .hv-signin, .hv-signup { transition: none; }
}
@keyframes hv-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hv-fade-out { to { opacity: 0; } }