/* ============================================================================
   "Try Creobot" spotlight, v1. Paired with creobot-promo.v2.js (same file on both sites).

   Versioned file: /assets/* is cached for a year and pages link assets without
   a query string, so a change here ships as creobot-promo.v2.css, never as an
   edit to this file.

   Everything is injected by the script and position:fixed, so nothing here can
   move layout. The root's z-index is written inline by the script, one below
   the Creobot launcher, so the launcher stays sharp and clickable above it.
   Tokens and components come from main.css. No new colours.
   ============================================================================ */

.cbp{position:fixed;inset:0;pointer-events:none;isolation:isolate}
.cbp[hidden]{display:none}

/* ---- backdrop ---- */
.cbp-scrim{position:absolute;inset:0;pointer-events:auto;
  background:rgba(8,8,10,.55);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity:0;transition:opacity var(--t) var(--ease)}
.cbp.is-open .cbp-scrim{opacity:1}

/* ---- card ---- */
.cbp-card{position:absolute;left:50%;top:46%;z-index:2;pointer-events:auto;
  /* Not a scroll box: .glow's ring sits 1px outside the card, and with
     overflow:auto that 1px drew a scrollbar on both axes wherever scrollbars
     take up space (Windows). Short screens get a vertical scroll below. */
  width:min(460px,calc(100vw - 2 * var(--s-6)));overflow:visible;
  padding:var(--pad);background:var(--bg-1);border-color:var(--line-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 24px 80px rgba(0,0,0,.55);
  /* the static half of main.css's glow ring, parked on the corner the arrow leaves from */
  --on:.7;--gx:100%;--gy:100%;
  opacity:0;transform:translate(-50%,calc(-50% + var(--s-2)));
  transition:opacity var(--t) var(--ease),transform var(--t) var(--ease)}
.cbp-card:hover{border-color:var(--line-2)}
.cbp.is-open .cbp-card{opacity:1;transform:translate(-50%,-50%)}
.cbp-card:focus{outline:none}

.cbp-x{position:absolute;top:var(--s-3);right:var(--s-3);z-index:3;width:40px;height:40px;
  display:grid;place-items:center;border-radius:var(--r-pill);color:var(--ink-2);
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.cbp-x:hover{background:rgba(255,255,255,.06);color:var(--ink)}
.cbp-x svg{width:16px;height:16px}

.cbp-card .kicker{margin-bottom:var(--s-4)}
.cbp-h{font-size:clamp(24px,2.4vw,28px);letter-spacing:-.03em;line-height:1.15;margin-bottom:var(--s-3);padding-right:var(--s-8)}
.cbp-body{font-size:15px;line-height:1.6;color:var(--ink-2)}

.cbp-div{display:flex;align-items:center;gap:var(--s-3);margin:var(--s-6) 0 var(--s-4);
  font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap}
.cbp-div::before,.cbp-div::after{content:"";height:1px;flex:1 1 auto;background:var(--line-2)}
.cbp-div::before{flex:0 0 var(--s-4)}

.cbp-row{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.cbp-row input{flex:1 1 180px;min-width:0;min-height:48px}
.cbp-row .btn{flex:0 0 auto}
.cbp-row .btn[aria-disabled="true"]{opacity:.7;cursor:progress}

.cbp-later{display:block;margin:var(--s-4) auto 0;padding:var(--s-2) var(--s-3);min-height:40px;
  font-size:14px;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;border-radius:var(--r-sm)}
.cbp-later:hover{color:var(--ink)}
.cbp-later[hidden],.cbp-join[hidden]{display:none}

.cbp-done{margin-top:var(--s-6);max-width:none}
.cbp-done a{white-space:nowrap}

/* ---- self-contained components ----
   The card used to lean on each site's main.css for its input, buttons,
   kicker and status card. creobot.ai scopes its form styles under .form and
   styles .mod differently, so there the field rendered as a browser-default
   box in monospace with outset buttons. Everything the card draws is defined
   here, scoped to .cbp, from the shared design tokens, so the overlay looks
   the same on both sites. Colours still come from each site's tokens. */
.cbp-card{font-family:var(--font-b)}
:where(.cbp-card) :where(button,input){font-family:inherit}
:where(.cbp-card) :where(button){background:none;border:0;cursor:pointer;color:inherit;font-size:inherit}
.cbp-card .kicker{display:flex;align-items:center;gap:var(--s-3);line-height:1;
  font-family:var(--font-m);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.cbp-card .kicker::before{content:"";width:22px;height:2px;border-radius:1px;background:var(--accent);flex:none}
.cbp-card .field{display:grid;gap:var(--s-2);border:0;padding:0;margin:0;outline:0}
.cbp-row input{font-family:var(--font-b);width:100%;background:var(--bg-1);border:1px solid var(--line-2);border-radius:var(--r-md);
  padding:var(--s-3) var(--s-4);font-size:15px;color:var(--ink);transition:border-color var(--t-fast) var(--ease)}
.cbp-row input::placeholder{color:var(--ink-4)}
.cbp-row input:hover{border-color:var(--line-3)}
.cbp-row input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.cbp-card .field[data-invalid="true"] input{border-color:#ff8b6d}
.cbp-card .err-msg{font-size:13px;color:#ff8b6d;min-height:1px}
.cbp-card .err-msg:empty{display:none}
.cbp-card .btn{font-family:var(--font-b);display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);white-space:nowrap;
  min-height:48px;padding:var(--s-3) var(--s-6);border:1px solid var(--line-2);border-radius:var(--r-pill);
  font-weight:600;font-size:15px;line-height:1;
  transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.cbp-card .btn-primary{background:var(--accent-btn);border-color:var(--accent-btn);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.cbp-card .btn-primary:hover{background:var(--accent-btn-hi);border-color:var(--accent-btn-hi)}
.cbp-card .form-status{display:flex;gap:var(--s-4);align-items:flex-start;padding:var(--s-5);
  border:1px solid rgba(107,189,110,.45);border-radius:var(--r-md);background:rgba(107,189,110,.06);
  font-size:14px;line-height:1.55;color:var(--ink-2)}
.cbp-card .fs-body{flex:1 1 auto;min-width:0}
.cbp-card .fs-mark{width:18px;height:18px;flex:none;margin-top:2px;border-radius:50%;display:grid;place-items:center;
  font:600 11px/1 var(--font-m);color:var(--bg);background:#6bbd6e}
.cbp-card .fs-title{margin:0 0 var(--s-2);font-size:15px;font-weight:600;color:var(--ink);line-height:1.35}
.cbp-card .fs-msg{margin:0;font-size:14px;line-height:1.6;color:var(--ink-2)}
.cbp-card .fs-next{margin:var(--s-3) 0 0;font-size:13.5px;line-height:1.55}
.cbp-card .fs-next a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.cbp-card .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cbp-card .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* ---- arrow, label, launcher ring ---- */
.cbp-arrow{position:absolute;inset:0;width:100%;height:100%;max-width:none;z-index:1;overflow:visible;
  pointer-events:none;color:var(--accent)}
.cbp-arrow path{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.cbp-arrow .a-main{stroke-width:3}
.cbp-arrow .a-ghost{stroke-width:1.25;opacity:.45}
.cbp-arrow .a-head{stroke-width:3}
.cbp.is-drawing .cbp-arrow .a-main,.cbp.is-drawing .cbp-arrow .a-ghost{
  stroke-dasharray:1;stroke-dashoffset:1;animation:cbp-draw 900ms var(--ease) forwards}
.cbp.is-drawing .cbp-arrow .a-ghost{animation-delay:80ms}
.cbp.is-drawing .cbp-arrow .a-head{opacity:0;animation:cbp-fade 200ms ease-out 820ms forwards}
@keyframes cbp-draw{to{stroke-dashoffset:0}}
@keyframes cbp-fade{to{opacity:1}}

.cbp-label{position:absolute;left:0;top:0;z-index:1;pointer-events:none;white-space:nowrap;
  font-family:var(--font-d);font-weight:700;font-size:17px;letter-spacing:-.01em;color:var(--accent-hi);
  text-shadow:0 1px 2px rgba(8,8,10,.9),0 0 12px rgba(8,8,10,.85);
  opacity:0;transition:opacity var(--t) var(--ease)}
.cbp.is-labelled .cbp-label{opacity:1}

.cbp-ring{position:absolute;left:0;top:0;z-index:1;pointer-events:none;border-radius:var(--r-pill);
  box-shadow:0 0 0 2px var(--accent-bd);animation:cbp-pulse 1.8s var(--ease) infinite}
@keyframes cbp-pulse{
  0%{box-shadow:0 0 0 2px var(--accent-bd),0 0 0 0 rgba(255,74,10,.45)}
  70%{box-shadow:0 0 0 2px var(--accent-bd),0 0 0 16px rgba(255,74,10,0)}
  100%{box-shadow:0 0 0 2px var(--accent-bd),0 0 0 0 rgba(255,74,10,0)}
}

/* ---- mobile: a bottom sheet above the launcher, top of the page left readable ---- */
@media (max-width:767.98px){
  .cbp-scrim{-webkit-backdrop-filter:none;backdrop-filter:none;
    background:linear-gradient(to bottom,rgba(8,8,10,0) 0%,rgba(8,8,10,.25) 35%,rgba(8,8,10,.6) 100%)}
  .cbp-card{left:calc(var(--s-3) + env(safe-area-inset-left));right:calc(var(--s-3) + env(safe-area-inset-right));
    top:auto;bottom:var(--cbp-sheet-bottom,calc(var(--s-12) + env(safe-area-inset-bottom)));
    width:auto;
    padding:var(--pad-sm);border-radius:var(--r-lg);
    background:rgba(14,14,17,.95);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
    transform:translateY(var(--s-4))}
  .cbp.is-open .cbp-card{transform:none}
  .cbp-card .kicker{margin-bottom:var(--s-3)}
  .cbp-h{font-size:22px}
  .cbp-body{font-size:14.5px}
  .cbp-div{margin:var(--s-5) 0 var(--s-3)}
  .cbp-row .btn{flex:1 1 100%}
  .cbp-later{margin-top:var(--s-2)}
  .cbp-label{font-size:15px}
}

/* ---- short screens: the card may not fit, so it scrolls vertically only,
   and the glow ring (the 1px that caused the stray scrollbars) is dropped ---- */
@media (min-width:768px) and (max-height:540px){
  .cbp-card{max-height:calc(100dvh - 2 * var(--s-4));overflow:hidden auto;overscroll-behavior:contain}
  .cbp-card::before,.cbp-card::after{display:none}
}
@media (max-width:767.98px) and (max-height:700px){
  .cbp-card{max-height:calc(100dvh - var(--cbp-sheet-bottom,96px) - var(--s-4));overflow:hidden auto;overscroll-behavior:contain}
  .cbp-card::before,.cbp-card::after{display:none}
}

/* ---- reduced motion: static arrow, no pulse, fade only ---- */
@media (prefers-reduced-motion:reduce){
  .cbp-card,.cbp.is-open .cbp-card{transform:translate(-50%,-50%)}
  .cbp.is-drawing .cbp-arrow .a-main,.cbp.is-drawing .cbp-arrow .a-ghost,
  .cbp.is-drawing .cbp-arrow .a-head{animation:none;stroke-dasharray:none;stroke-dashoffset:0;opacity:1}
  .cbp-ring{animation:none}
}
@media (prefers-reduced-motion:reduce) and (max-width:767.98px){
  .cbp-card,.cbp.is-open .cbp-card{transform:none}
}