/* The AI helper widget on marketing pages (public/js/helper.js, the renamed candoo.js) keeps the light card
   customers meet inside the app, so it gets the light tokens it was built on and the in-app accent. It mounts
   on <body>, outside .mk, so its button is styled here rather than by the site's .mk .btn rules. */
.helper-launcher, .helper-panel, .candoo-launcher, .candoo-panel { --ink: #12152e; --muted: #565b78; --line: #e4e2ea; --accent: #b45309; --accent-soft: #fff4e0; --display: "Sora", "Avenir Next", "Segoe UI", sans-serif; color: var(--ink); color-scheme: light; font-family: "Inter", "Helvetica Neue", Arial, sans-serif; }
.helper-panel .btn-primary, .candoo-panel .btn-primary { background: #b45309; color: #fff; box-shadow: none; }
.helper-panel .btn-primary:hover, .candoo-panel .btn-primary:hover { background: #9a4607; box-shadow: none; }
/* Above the sticky header (20) and below the open phone menu (30), so the menu's buttons are never covered.
   helper.js injects its own styles after this file, so these rules carry `body` to win on specificity. */
body .helper-launcher, body .helper-panel, body .candoo-launcher, body .candoo-panel { z-index: 25; }
/* Phones get the avatar alone: the hint bubble sat over the hero's start button. */
@media (max-width: 559px) { body .helper-hint, body .candoo-hint { display: none; } }
/* The hint's dismiss button is a full 44 px target. */
body .helper-hint-x, body .candoo-hint-x { top: 0; right: 0; min-width: 44px; min-height: 44px; display: grid; place-items: center; }
body .helper-hint, body .candoo-hint { padding-right: 44px; }