/* Boosty — the scroll-along character. Phase 1: character, nudges, quick book, canned answers.
   Brand: navy #122a48, orange #ff9046, logo blue #4058f0, logo orange #e85818. Docked bottom-right,
   above the mobile call bar (its height is measured at runtime into --bst-bar). */
:root { --bst-navy:#122a48; --bst-navy-l:#1d4275; --bst-orange:#ff9046; --bst-orange-d:#e85818; --bst-blue:#4058f0; --bst-blue-l:#9fb2ff; --bst-bar:0px; --bst-size:72px; }

/* ---- dock ---- */
.bst { position: fixed; right: 16px; bottom: calc(16px + var(--bst-bar)); z-index: 40; font-family: var(--font, system-ui, sans-serif); }
.bst * { box-sizing: border-box; }
.bst[hidden] { display: none !important; }

/* ---- the character button ---- */
.bst-char { width: var(--bst-size); height: calc(var(--bst-size) * 1.18); border: 0; background: transparent; padding: 0; cursor: pointer; display: block; position: relative; transform: translateX(0); transition: transform .35s cubic-bezier(.16,1,.3,1); }
.bst-char:focus-visible { outline: 3px solid var(--bst-orange); outline-offset: 4px; border-radius: 50%; }
.bst-char svg { width: 100%; height: 100%; overflow: visible; display: block; filter: drop-shadow(0 8px 16px rgba(18,42,72,.28)); }
.bst.is-peeking .bst-char { transform: translateX(130%); }
.bst-char:hover { transform: translateY(-3px); }
.bst.is-bounce .bst-char { animation: bst-bounce .55s cubic-bezier(.36,1.6,.3,1); }
@keyframes bst-bounce { 0%{transform:scale(1)} 35%{transform:scale(1.12,.9)} 60%{transform:scale(.95,1.06)} 100%{transform:scale(1)} }

/* body parts */
.bst-body { transform-origin: 60px 100px; animation: bst-breathe 4.2s ease-in-out infinite; }
@keyframes bst-breathe { 0%,100%{transform:scaleY(1)} 50%{transform:scaleY(1.025) translateY(-1px)} }
.bst-flame { transform-origin: 60px 34px; animation: bst-flicker 1.1s ease-in-out infinite alternate; }
.bst-flame-in { transform-origin: 60px 34px; animation: bst-flicker 0.9s ease-in-out infinite alternate-reverse; }
@keyframes bst-flicker { 0%{transform:skewX(-3deg) scaleY(1)} 100%{transform:skewX(3deg) scaleY(1.06)} }
.bst-frost { transform-origin: 60px 78px; animation: bst-shimmer 3.4s ease-in-out infinite; }
@keyframes bst-shimmer { 0%,100%{opacity:.92} 50%{opacity:1} }
.bst-lid { transform-origin: center 44px; transform: scaleY(0); }
.bst.is-blink .bst-lid, .bst.is-asleep .bst-lid { transform: scaleY(1); transition: transform .08s; }
.bst-pupil { transition: transform .25s ease-out; }
.bst-mouth-open { display: none; transform-origin: 60px 69px; }
.bst.is-talking .bst-mouth { display: none; }
.bst.is-talking .bst-mouth-open { display: block; animation: bst-talk .28s steps(2) infinite; }
@keyframes bst-talk { 0%{transform:scaleY(.4)} 100%{transform:scaleY(1)} }
.bst-arm-r { transform-origin: 84px 96px; }
.bst.is-waving .bst-arm-r { animation: bst-wave 1.4s ease-in-out 1; }
@keyframes bst-wave { 0%,100%{transform:rotate(0)} 20%{transform:rotate(-70deg)} 40%{transform:rotate(-40deg)} 60%{transform:rotate(-75deg)} 80%{transform:rotate(-45deg)} }
.bst-zzz { opacity: 0; font: 700 14px/1 var(--font, system-ui); fill: var(--bst-navy-l); }
.bst.is-asleep .bst-zzz { animation: bst-zzz 2.4s ease-in-out infinite; }
.bst.is-asleep .bst-zzz:nth-child(2) { animation-delay: .8s; }
.bst.is-asleep .bst-zzz:nth-child(3) { animation-delay: 1.6s; }
@keyframes bst-zzz { 0%{opacity:0;transform:translate(0,0)} 30%{opacity:1} 100%{opacity:0;transform:translate(10px,-22px)} }
.bst.is-asleep .bst-body, .bst.is-asleep .bst-flame, .bst.is-asleep .bst-flame-in { animation-play-state: paused; }
.bst.is-thinking .bst-pupil { transform: translate(0,-3px); }
/* seasonal hook: <html data-bst-season="summer|winter"> */
.bst-shades, .bst-scarf { display: none; }
html[data-bst-season="summer"] .bst-shades { display: block; }
html[data-bst-season="winter"] .bst-scarf { display: block; }

/* ---- speech bubble ---- */
.bst-bubble { position: absolute; right: calc(100% + 10px); bottom: 12px; width: max-content; max-width: min(260px, calc(100vw - 120px)); background: #fff; color: var(--bst-navy); border: 1px solid #d9e2ee; border-radius: 14px 14px 4px 14px; padding: 10px 30px 10px 12px; font-size: 14px; line-height: 1.4; box-shadow: 0 10px 24px rgba(18,42,72,.18); cursor: pointer; opacity: 0; transform: translateY(6px) scale(.96); transition: opacity .25s, transform .25s; pointer-events: none; }
.bst-bubble.is-on { opacity: 1; transform: none; pointer-events: auto; }
.bst-bubble::after { content: ""; position: absolute; right: -7px; bottom: 10px; width: 12px; height: 12px; background: #fff; border-right: 1px solid #d9e2ee; border-bottom: 1px solid #d9e2ee; transform: rotate(-45deg); }
.bst-bubble-x { position: absolute; top: 4px; right: 6px; border: 0; background: transparent; color: #6b7a90; font-size: 16px; line-height: 1; cursor: pointer; padding: 2px 4px; }
.bst-bubble-x:hover { color: var(--bst-navy); }
.bst-caret { display: inline-block; width: 2px; height: 1em; background: var(--bst-orange); vertical-align: -2px; margin-left: 1px; animation: bst-caret .7s steps(1) infinite; }
@keyframes bst-caret { 50%{opacity:0} }

/* ---- panel ---- */
.bst-panel { position: fixed; right: 16px; bottom: calc(16px + var(--bst-bar)); z-index: 41; width: min(360px, calc(100vw - 32px)); max-height: min(72vh, 640px); display: flex; flex-direction: column; background: #fff; color: var(--bst-navy); border-radius: 16px; box-shadow: 0 24px 60px rgba(18,42,72,.32); border: 1px solid #d9e2ee; overflow: hidden; transform-origin: bottom right; animation: bst-pop .28s cubic-bezier(.16,1,.3,1); }
@keyframes bst-pop { from{opacity:0;transform:scale(.9) translateY(12px)} to{opacity:1;transform:none} }
.bst-head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 10px; border-bottom: 1px solid #edf1f6; background: linear-gradient(180deg,#f7f9fc,#fff); }
.bst-head svg { width: 38px; height: 44px; flex: 0 0 auto; }
.bst-head b { font-size: 15px; display: block; }
.bst-head small { color: #5b6b82; font-size: 12px; display: block; }
.bst-close { margin-left: auto; border: 0; background: transparent; font-size: 20px; line-height: 1; padding: 6px; cursor: pointer; color: #5b6b82; border-radius: 8px; }
.bst-close:hover { background: #eef2f7; color: var(--bst-navy); }
.bst-tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid #edf1f6; }
.bst-tab { border: 0; background: transparent; padding: 10px; font: inherit; font-weight: 700; font-size: 14px; color: #5b6b82; cursor: pointer; border-bottom: 2px solid transparent; }
.bst-tab[aria-selected="true"] { color: var(--bst-navy); border-bottom-color: var(--bst-orange); }
.bst-view { overflow: auto; padding: 14px; font-size: 14px; line-height: 1.45; }
.bst-q { margin: 0 0 10px; font-weight: 700; font-size: 15px; }
.bst-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.bst-chip { border: 1.5px solid #c9d6e6; background: #fff; color: var(--bst-navy); border-radius: 999px; padding: 8px 12px; font: inherit; font-size: 14px; cursor: pointer; }
.bst-chip:hover { border-color: var(--bst-navy-l); }
.bst-chip.on { background: var(--bst-navy); color: #fff; border-color: var(--bst-navy); }
.bst-field { margin-bottom: 10px; }
.bst-field label { display: block; font-size: 12px; font-weight: 700; color: #5b6b82; margin-bottom: 4px; }
.bst-field input, .bst-field textarea { width: 100%; border: 1.5px solid #c9d6e6; border-radius: 10px; padding: 9px 11px; font: inherit; font-size: 15px; color: var(--bst-navy); background: #fff; }
.bst-field input:focus, .bst-field textarea:focus { outline: 2px solid var(--bst-orange); outline-offset: 1px; border-color: var(--bst-orange); }
.bst-field.bad input { border-color: #d63b2f; }
.bst-err { color: #b3261e; font-size: 12px; min-height: 14px; margin-top: 3px; }
.bst-row { display: flex; gap: 8px; margin-top: 8px; }
.bst-btn { border: 0; border-radius: 999px; padding: 11px 16px; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; }
.bst-btn.o { background: var(--bst-orange); color: var(--bst-navy); }
.bst-btn.n { background: var(--bst-navy); color: #fff; }
.bst-btn.g { background: transparent; color: var(--bst-navy); border: 1.5px solid #c9d6e6; }
.bst-btn:disabled { opacity: .6; cursor: default; }
.bst-progress { height: 3px; background: #edf1f6; border-radius: 2px; margin: 0 0 12px; overflow: hidden; }
.bst-progress.is-empty { visibility: hidden; }
.bst-progress i { display: block; height: 100%; background: var(--bst-orange); width: 0; transition: width .3s; }
.bst-list { list-style: none; margin: 0; padding: 0; }
.bst-list li button { width: 100%; text-align: left; border: 0; border-bottom: 1px solid #edf1f6; background: transparent; padding: 10px 4px; font: inherit; font-size: 14px; color: var(--bst-navy); cursor: pointer; }
.bst-list li button:hover { background: #f5f8fc; }
.bst-search { width: 100%; border: 1.5px solid #c9d6e6; border-radius: 10px; padding: 9px 11px; font: inherit; font-size: 14px; margin-bottom: 8px; }
.bst-answer { background: #f5f8fc; border-radius: 12px; padding: 12px; margin-bottom: 12px; }
.bst-note { font-size: 12px; color: #5b6b82; margin: 10px 0 0; }
.bst-done { text-align: center; padding: 18px 6px; }
.bst-done b { display: block; font-size: 17px; margin-bottom: 6px; }
.bst-call { display: inline-block; margin-top: 8px; color: var(--bst-navy); font-weight: 700; }

@media (max-width: 480px) { .bst { right: 12px; } .bst-panel { right: 8px; width: calc(100vw - 16px); max-height: min(78vh, 640px); } :root { --bst-size: 64px; } }
@media (prefers-reduced-motion: reduce) {
  .bst-body, .bst-flame, .bst-flame-in, .bst-frost, .bst-caret, .bst.is-asleep .bst-zzz, .bst.is-talking .bst-mouth-open, .bst.is-waving .bst-arm-r, .bst.is-bounce .bst-char { animation: none !important; }
  .bst-char, .bst-bubble, .bst-panel { transition: none !important; animation: none !important; }
}

/* ---- polish pass: expression and extra motion ---- */
.bst-brow-l, .bst-brow-r { transform-origin: center; transition: transform .25s; }
.bst.is-thinking .bst-brow-r { transform: translateY(-3px) rotate(-8deg); }
.bst.is-thinking .bst-brow-l { transform: translateY(1px); }
.bst.is-asleep .bst-brow-l, .bst.is-asleep .bst-brow-r { transform: translateY(4px); }
.bst-dots { opacity: 0; }
.bst.is-thinking .bst-dots { animation: bst-dots 1.2s ease-in-out infinite; }
.bst.is-thinking .bst-dots circle { animation: bst-dot 1.2s ease-in-out infinite; }
.bst.is-thinking .bst-dots circle:nth-child(2) { animation-delay: .2s; } .bst.is-thinking .bst-dots circle:nth-child(3) { animation-delay: .4s; }
@keyframes bst-dots { 0%,100%{opacity:.5} 50%{opacity:1} }
@keyframes bst-dot { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }
.bst-head { transform-origin: 60px 54px; transition: transform .35s cubic-bezier(.16,1,.3,1); }
.bst-char:hover .bst-head { transform: rotate(-6deg); }
.bst.is-hop .bst-char { animation: bst-hop .7s cubic-bezier(.36,1.4,.3,1); }
@keyframes bst-hop { 0%{transform:translateY(0)} 30%{transform:translateY(-16px) scale(1.04,.96)} 55%{transform:translateY(0) scale(.97,1.05)} 75%{transform:translateY(-5px)} 100%{transform:translateY(0)} }
.bst-arm-l { transform-origin: 27px 98px; }
.bst-arm-r { transform-origin: 93px 98px; }
.bst.is-cheer .bst-arm-l { animation: bst-cheer-l 1.6s ease-in-out 1; }
.bst.is-cheer .bst-arm-r { animation: bst-cheer-r 1.6s ease-in-out 1; }
@keyframes bst-cheer-l { 0%,100%{transform:rotate(0)} 25%,75%{transform:rotate(150deg)} 50%{transform:rotate(135deg)} }
@keyframes bst-cheer-r { 0%,100%{transform:rotate(0)} 25%,75%{transform:rotate(-150deg)} 50%{transform:rotate(-135deg)} }
.bst.is-cheer .bst-head { animation: bst-nod .8s ease-in-out 2; }
@keyframes bst-nod { 0%,100%{transform:rotate(0)} 50%{transform:rotate(6deg)} }
@media (prefers-reduced-motion: reduce) { .bst.is-hop .bst-char, .bst.is-cheer .bst-arm-l, .bst.is-cheer .bst-arm-r, .bst.is-cheer .bst-head, .bst.is-thinking .bst-dots, .bst.is-thinking .bst-dots circle { animation: none !important; } .bst-char:hover .bst-head { transform: none; } }

/* ---- v2 (2026-09-23): alive from the logo, floating, softer look ---- */
.bst-char svg { position: relative; z-index: 1; animation: bst-float 3.6s ease-in-out infinite; }
@keyframes bst-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
.bst-shadow { position: absolute; left: 22%; right: 22%; bottom: -2px; height: 8px; border-radius: 50%; background: radial-gradient(closest-side, rgba(18,42,72,.28), rgba(18,42,72,0)); animation: bst-shadow 3.6s ease-in-out infinite; z-index: 0; }
@keyframes bst-shadow { 0%,100%{transform:scaleX(1);opacity:1} 50%{transform:scaleX(.82);opacity:.7} }
.bst-halo { position: absolute; left: 50%; top: 39%; width: 86%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%,-50%) scale(.9); background: radial-gradient(closest-side, rgba(255,144,70,.35), rgba(64,88,240,.12) 60%, rgba(64,88,240,0)); opacity: 0; animation: bst-halo 7s ease-in-out infinite 2s; z-index: 0; pointer-events: none; }
@keyframes bst-halo { 0%,70%,100%{opacity:0;transform:translate(-50%,-50%) scale(.9)} 80%{opacity:1;transform:translate(-50%,-50%) scale(1.25)} }
.bst-char svg { filter: drop-shadow(0 6px 10px rgba(18,42,72,.22)); }
.bst-cheek { transition: opacity .3s; }
.bst.is-talking .bst-cheek, .bst.is-cheer .bst-cheek { opacity: .85; }
.bst-feet { transform-origin: 60px 132px; }
.bst.is-hop .bst-feet { animation: bst-feet .7s ease-in-out; }
@keyframes bst-feet { 30%{transform:scaleY(.8)} 60%{transform:scaleY(1.1)} }
.bst.is-flare .bst-flame { animation: bst-flare 1.2s ease-in-out; }
@keyframes bst-flare { 0%,100%{transform:scale(1)} 40%{transform:scale(1.18,1.35)} 70%{transform:scale(.96,1.05)} }

/* first visit: hidden until the spark lands */
.bst.is-hidden .bst-char { opacity: 0; pointer-events: none; transform: scale(.4); }
.bst.is-hidden .bst-bubble { display: none; }
.bst-spark { position: fixed; left: 0; top: 0; z-index: 60; width: 30px; height: 30px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 200deg, #ff9046, #e85818 35%, #4058f0 55%, #9fb2ff 80%, #ff9046);
  box-shadow: 0 0 0 3px rgba(255,255,255,.9) inset, 0 0 18px 6px rgba(255,144,70,.55), 0 0 34px 10px rgba(64,88,240,.25); will-change: transform; }
.bst-trail { position: fixed; z-index: 59; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: #ff9046; pointer-events: none; animation: bst-trail .7s ease-out forwards; }
.bst-trail.c { background: #4058f0; }
@keyframes bst-trail { from{opacity:.95;transform:scale(1)} to{opacity:0;transform:scale(.2) translateY(6px)} }

/* assembling out of the spark */
.bst.is-assemble .bst-char { opacity: 1; transform: none; }
.bst.is-assemble .bst-halo { animation: bst-burst .8s ease-out both; }
@keyframes bst-burst { 0%{opacity:1;transform:translate(-50%,-50%) scale(.25)} 100%{opacity:0;transform:translate(-50%,-50%) scale(1.9)} }
.bst.is-assemble .bst-head { animation: bst-a-head .75s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes bst-a-head { 0%{transform:scale(.3) rotate(-220deg)} 100%{transform:none} }
.bst.is-assemble .bst-torso, .bst.is-assemble .bst-feet { transform-origin: 60px 112px; animation: bst-a-pop .45s .38s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes bst-a-pop { 0%{transform:scale(0);opacity:0} 100%{transform:none;opacity:1} }
.bst.is-assemble .bst-arm-l, .bst.is-assemble .bst-arm-r { animation: bst-a-arm .45s .55s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes bst-a-arm { 0%{transform:scale(0);opacity:0} 100%{transform:none;opacity:1} }
.bst.is-assemble .bst-lid { animation: bst-a-lid 1.1s both; }
@keyframes bst-a-lid { 0%,78%{transform:scaleY(1)} 100%{transform:scaleY(0)} }
.bst.is-assemble .bst-flame { animation: bst-a-flame .6s .7s ease-out both; }
@keyframes bst-a-flame { 0%{transform:scale(1,.2)} 60%{transform:scale(1.1,1.3)} 100%{transform:none} }

/* panel: navy header, Boosty alive inside it */
.bst-panel .bst-head { background: linear-gradient(135deg, #122a48, #1d4275); color: #fff; border-bottom: 0; padding: 12px 12px 12px 14px; }
.bst-panel .bst-head small { color: #c9d6e8; }
.bst-panel .bst-head svg { width: 44px; height: 52px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.25)); }
.bst-panel .bst-close { color: #c9d6e8; }
.bst-panel .bst-close:hover { background: rgba(255,255,255,.12); color: #fff; }
.bst-q { background: #f2f6fb; border-radius: 4px 14px 14px 14px; padding: 10px 12px; display: inline-block; animation: bst-in .3s cubic-bezier(.16,1,.3,1); }
@keyframes bst-in { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
.bst-chip { transition: transform .15s, background .15s, border-color .15s; }
.bst-chip:hover { transform: translateY(-1px); }
.bst-btn.o { transition: transform .15s, box-shadow .15s; }
.bst-btn.o:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(232,88,24,.3); }

@media (prefers-reduced-motion: reduce) {
  .bst-char svg, .bst-shadow, .bst-halo, .bst.is-flare .bst-flame, .bst.is-hop .bst-feet, .bst-q { animation: none !important; }
  .bst-spark, .bst-trail { display: none !important; }
}
.bst-panel .bst-avatar { flex: 0 0 auto; width: 50px; height: 50px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #eef3fb, #c9d6e8); display: grid; place-items: center; overflow: hidden; box-shadow: 0 0 0 2px rgba(255,255,255,.25); }
.bst-panel .bst-avatar svg { width: 40px; height: 47px; margin-top: 6px; filter: none; }

/* ---- Ask v2 (2026-09-29): answer buttons, article tag ---- */
.bst-links { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 12px; }
.bst-links .bst-btn { text-decoration: none; display: inline-flex; align-items: center; }
.bst-btn.n { background: var(--bst-navy); color: #fff; }
.bst-list li button small { display: inline-block; margin-left: 8px; font-size: 11px; font-weight: 700; color: #b3470f; background: #fff1e6; padding: 2px 7px; border-radius: 999px; vertical-align: 1px; }
/* "Related" under an answer (2026-10-02) */
.bst-related{margin-top:12px;display:grid;gap:6px}
.bst-rel-h{margin:0;font:700 11px var(--body,system-ui);letter-spacing:.08em;text-transform:uppercase;color:#7b8aa0}
.bst-related button{text-align:left;font:500 13.5px/1.35 var(--body,system-ui);color:#122a48;background:#f1f6fc;border:1px solid #dbe6f3;border-radius:10px;padding:8px 10px;cursor:pointer}
.bst-related button:hover{background:#e6eff9}
/* v3 suggestions (2026-10-02): the untyped part bold, keyboard-active row shaded */
.bst-list button b{font-weight:800}
.bst-list button.is-active,.bst-list button:hover{background:#e6eff9}
/* phones (2026-10-03): smaller, tucks to the edge so he never sits on content; the panel docks flush on the call bar */
/* every width (2026-10-04): steps off to the right beside the footer, the request form, CTA cards and the open menu */
.bst{transition:transform .35s cubic-bezier(.16,1,.3,1)}
.bst.is-away{transform:translateX(calc(100% + 24px));pointer-events:none}
.bst.is-away .bst-bubble{display:none}
@media (prefers-reduced-motion:reduce){.bst{transition:none}}
@media (max-width:640px){
  :root{--bst-size:50px}
  /* Osher 10-03: "boosty is kinda hidden" — fully visible again, small, perched on the call bar's top-right corner so he
     sits over the bar more than over the page. Still steps fully away beside forms, the footer and the open menu. */
  .bst{right:8px;bottom:calc(var(--bst-bar) - 16px);transition:transform .35s cubic-bezier(.16,1,.3,1)}
  .bst.is-tucked{transform:none}
  .bst.is-tucked .bst-char{opacity:.9}
  .bst.is-away{transform:translateX(calc(100% + 20px))}
  .bst.is-away .bst-bubble{display:none}
  .bst-bubble{max-width:min(230px,calc(100vw - 100px));font-size:13.5px}
  .bst-panel{left:0;right:0;bottom:var(--bst-bar);width:100%;max-height:min(78vh,640px);max-height:min(78dvh,calc(100dvh - var(--bst-bar) - 16px),640px);border-radius:16px 16px 0 0;border-bottom:0}
}
@media (max-width:640px) and (prefers-reduced-motion:reduce){.bst{transition:none}}