/* supportgeni.us — the whole design system. Tokens first, then components in
   page order, then the demo stage, then motion.

   Ported by hand from the Claude Design canvas SupportGenius.dc.html. The one
   deliberate change is --mute: the canvas used #6b7382, which is 4.1:1 on the
   page background and fails WCAG AA for the small mono labels it is used on.
   #7b8394 is 5.1:1 and reads the same. */

:root {
  --bg: #0a0c10;
  --bg-2: #0d1015;
  --card: #0f1216;
  --raised: #171b21;

  --ink: #e7eaef;
  --soft: #aeb6c3;
  --code: #c5cbd6;
  --dim: #9aa3b2;
  --mute: #7b8394;

  --acc: #5b9dff;
  --acc-08: rgba(91, 157, 255, .08);
  --acc-12: rgba(91, 157, 255, .12);
  --acc-16: rgba(91, 157, 255, .16);
  --acc-40: rgba(91, 157, 255, .4);
  --ok: #3ddc97;
  --warn: #ffc85c;
  --bad: #ff8a94;
  --rec: #ff5a5f;

  --line: rgba(255, 255, 255, .08);
  --line-2: rgba(255, 255, 255, .1);
  --line-3: rgba(255, 255, 255, .14);
  --line-hover: rgba(255, 255, 255, .18);

  --sans: Geist, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --wrap: 1200px;
  --gutter: 24px;
  --loop: 32s;
}

/* ------------------------------------------------------------------ base */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--acc); }
button, input { font-family: inherit; }
::selection { background: rgba(91, 157, 255, .35); }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; border-radius: 4px; }
[id] { scroll-margin-top: 76px; }
code { font-family: var(--mono); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 12px; top: -48px; z-index: 50;
  background: var(--ink); color: var(--bg); padding: 8px 12px; border-radius: 8px; font-size: 14px;
}
.skip:focus { top: 12px; color: var(--bg); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.mono { font-family: var(--mono); }

/* ------------------------------------------------------------------ chips
   `planned` marks anything that does not exist yet. `illustration` marks sample
   data. Both are load-bearing: see README, "The rule this site is built around". */

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .04em; line-height: 1.4;
  color: var(--dim); border: 1px solid var(--line-3); border-radius: 5px; padding: 2px 7px;
  white-space: nowrap; vertical-align: middle;
}
.chip--planned { color: var(--warn); border-color: rgba(255, 200, 92, .45); }
.chip--illus { color: var(--dim); border-style: dashed; }
.chip--acc { color: var(--acc); border-color: var(--acc-40); }

/* ------------------------------------------------------------------ banner */

.banner {
  margin: 0; padding: 10px var(--gutter);
  text-align: center; font-size: 13px; line-height: 1.5; color: var(--soft);
  background: var(--bg-2); border-bottom: 1px solid var(--line);
}
.banner strong { color: var(--ink); font-weight: 500; }
.banner a { color: var(--acc); text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------------ nav */

.nav {
  position: sticky; top: 0; z-index: 20;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  background: rgba(10, 12, 16, .72); border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.nav__in { height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav__links { display: flex; gap: 28px; font-size: 14px; }
.nav__links a { color: var(--dim); }
.nav__links a:hover { color: var(--acc); }
.nav__cta {
  font-size: 14px; font-weight: 500; background: var(--ink); color: var(--bg);
  padding: 8px 14px; border-radius: 8px; white-space: nowrap;
}
.nav__cta:hover { color: var(--bg); background: #fff; }
@media (max-width: 880px) { .nav__links { display: none; } }

/* the mark: two counter-rotating rings and a pulse, in a gradient tile */
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: -.01em; }
.brand:hover { color: var(--ink); }
.brand b { font-weight: 600; color: var(--acc); }
.logo {
  position: relative; width: 26px; height: 26px; flex: none; overflow: hidden;
  border-radius: 8px; background: linear-gradient(135deg, #7fb4ff, #3f7fe6);
  display: grid; place-items: center;
  box-shadow: 0 0 18px rgba(91, 157, 255, .45), inset 0 0 0 1px rgba(255, 255, 255, .25);
}
.logo::before, .logo::after { content: ""; position: absolute; border-radius: 50%; }
.logo::before {
  inset: 4px; border: 1.5px dashed rgba(10, 12, 16, .55); border-top-color: transparent;
  animation: logoSpin 3s linear infinite;
}
.logo::after {
  inset: 8px; border: 1.5px solid rgba(10, 12, 16, .35); border-bottom-color: transparent;
  animation: logoSpin 2s linear infinite reverse;
}
.logo i { width: 6px; height: 6px; border-radius: 50%; background: var(--bg); animation: logoDot 2s ease-in-out infinite; }

/* ------------------------------------------------------------------ buttons */

.btn {
  display: inline-block; font-size: 15px; font-weight: 600; line-height: 1.2;
  padding: 12px 20px; border-radius: 10px; border: 1px solid transparent; cursor: pointer;
  background: var(--acc); color: var(--bg);
}
.btn:hover { color: var(--bg); background: #74adff; }
.btn--ghost { background: rgba(255, 255, 255, .03); border-color: var(--line-3); color: var(--ink); font-weight: 400; }
.btn--ghost:hover { background: rgba(255, 255, 255, .06); color: var(--ink); }
.btn:disabled { opacity: .6; cursor: progress; }

/* ------------------------------------------------------------------ hero */

.hero { position: relative; padding: 96px var(--gutter) 40px; overflow: hidden; }
.hero__glow, .hero__grid { position: absolute; inset: 0; pointer-events: none; }
.hero__glow { background: radial-gradient(60% 50% at 50% 0%, rgba(91, 157, 255, .14), transparent 70%); }
.hero__grid {
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 20%, #000, transparent);
  mask-image: radial-gradient(70% 60% at 50% 20%, #000, transparent);
}
.hero__copy { position: relative; max-width: 840px; margin: 0 auto; text-align: center; animation: rise .7s ease both; }
.pill {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 28px;
  font-family: var(--mono); font-size: 12px; color: var(--dim);
  border: 1px solid var(--line-2); border-radius: 999px; padding: 6px 12px;
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--warn); flex: none; }
.hero h1 {
  font-size: clamp(36px, 5.6vw, 68px); line-height: 1.02; letter-spacing: -.035em; font-weight: 600;
  margin: 0 0 22px; text-wrap: balance;
}
.hero h1 span { color: var(--dim); }
.hero__lede {
  font-size: 18px; line-height: 1.55; color: var(--soft); max-width: 640px; margin: 0 auto 32px; text-wrap: pretty;
}
.hero__ctas { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

.snippet {
  display: inline-flex; align-items: center; gap: 14px; margin-top: 28px; max-width: 100%; overflow: hidden;
  font-family: var(--mono); font-size: 13px;
  background: var(--card); border: 1px solid var(--line-2); border-radius: 10px; padding: 10px 12px 10px 16px;
}
.snippet code { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--code); }
.snippet .t { color: var(--mute); }
.snippet .v { color: var(--acc); }
.snippet__note { margin: 10px 0 0; font-family: var(--mono); font-size: 11px; color: var(--mute); }

.surfaces {
  display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 14px 0 0; padding: 0; list-style: none;
  font-family: var(--mono); font-size: 11px; color: var(--mute);
}
.surfaces li { border: 1px solid var(--line-2); border-radius: 6px; padding: 4px 9px; }
.surfaces li.hi { border-color: rgba(91, 157, 255, .5); color: var(--code); }

/* ------------------------------------------------------------------ sections */

.sec { padding-top: 96px; padding-bottom: 96px; }
.sec--tint { border-top: 1px solid rgba(255, 255, 255, .06); background: var(--bg-2); }
.eyebrow {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--acc);
}
.eyebrow .chip { letter-spacing: .04em; }
.h2 {
  font-size: clamp(28px, 3.4vw, 40px); letter-spacing: -.03em; font-weight: 600; line-height: 1.1;
  margin: 0 0 48px; max-width: 640px; text-wrap: balance;
}
.h2--tight { margin-bottom: 16px; }
.lede { font-size: 16px; line-height: 1.6; color: var(--dim); margin: 0 0 48px; max-width: 640px; text-wrap: pretty; }
.note { font-family: var(--mono); font-size: 11px; color: var(--mute); }

/* how it would work */
.steps {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  margin: 0; padding: 0; list-style: none;
}
.steps li { background: var(--bg); padding: 32px 28px; }
.steps__n { display: block; font-family: var(--mono); font-size: 12px; color: var(--mute); margin-bottom: 22px; }
.steps h3 { font-size: 18px; font-weight: 500; margin: 0 0 10px; letter-spacing: -.01em; }
.steps p { font-size: 14.5px; line-height: 1.55; color: var(--dim); margin: 0; text-wrap: pretty; }

/* features */
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.feature {
  border: 1px solid var(--line); border-radius: 14px; padding: 22px; background: var(--bg-2);
  transition: border-color .2s;
}
.feature:hover { border-color: var(--line-hover); }
.feature__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 18px; }
.feature__icon {
  width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  border: 1px solid var(--acc-40); background: var(--acc-12); color: var(--acc);
}
.feature h3 { font-size: 15px; font-weight: 500; margin: 0 0 6px; }
.feature p { font-size: 13.5px; line-height: 1.5; color: var(--dim); margin: 0; text-wrap: pretty; }

/* escalation pipeline */
.pipeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.stage-card {
  position: relative; display: flex; flex-direction: column; gap: 14px;
  border: 1px solid var(--line); border-radius: 14px; padding: 22px; background: var(--bg);
}
.stage-card__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.stage-card__n { font-family: var(--mono); font-size: 11px; color: var(--mute); }
.stage-card h3 { font-size: 16px; font-weight: 500; letter-spacing: -.01em; margin: 0; }
.stage-card p { font-size: 13.5px; line-height: 1.5; color: var(--dim); margin: 0; text-wrap: pretty; }
.stage-card pre {
  margin: auto 0 0; font-family: var(--mono); font-size: 10.5px; line-height: 1.7; color: var(--code);
  background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.legend { display: flex; gap: 12px 24px; flex-wrap: wrap; margin: 28px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--dim); }
.legend li { display: flex; gap: 8px; align-items: center; }
.dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.dot--ok { background: var(--ok); } .dot--warn { background: var(--warn); } .dot--bad { background: var(--bad); }

.sla {
  margin-top: 48px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg); overflow: hidden;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.sla__copy { padding: 28px; border-bottom: 1px solid var(--line); }
.sla__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.sla__head h3 { font-size: 16px; font-weight: 500; margin: 0; }
.sla__copy p { font-size: 14px; line-height: 1.55; color: var(--dim); margin: 0 0 16px; text-wrap: pretty; }
.tags { display: flex; gap: 6px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.tags li { font-family: var(--mono); font-size: 10px; color: var(--code); border: 1px solid rgba(255, 255, 255, .12); border-radius: 5px; padding: 3px 7px; }
.sla__table { padding: 20px 28px 24px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 11.5px; line-height: 1.6; color: var(--code); overflow-x: auto; }
.sla__table table { width: 100%; border-collapse: collapse; min-width: 380px; }
.sla__table th { text-align: left; font-weight: 400; font-size: 10px; letter-spacing: .06em; color: var(--mute); padding: 0 8px 8px 0; border-bottom: 1px solid var(--line); }
.sla__table td { padding: 9px 8px 9px 0; border-bottom: 1px solid rgba(255, 255, 255, .05); vertical-align: top; }
.sla__table td:last-child { color: var(--dim); }
.sla__table caption { caption-side: bottom; text-align: left; padding-top: 12px; color: var(--mute); font-size: 10px; }
.sev--critical { color: var(--bad); } .sev--high { color: var(--warn); } .sev--normal { color: var(--ink); } .sev--low { color: var(--dim); }

/* human in the loop */
.hitl { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; align-items: start; }
.timeline { margin: 0; padding: 0; list-style: none; }
.timeline > li { display: grid; grid-template-columns: 28px 1fr; gap: 16px; --c: var(--acc); --cbg: var(--acc-12); }
.timeline > li[data-actor="customer"] { --c: var(--ink); --cbg: rgba(255, 255, 255, .06); }
.timeline > li[data-actor="trigger"] { --c: var(--warn); --cbg: rgba(255, 200, 92, .12); }
.timeline > li[data-actor="human"] { --c: var(--ok); --cbg: rgba(61, 220, 151, .12); }
.timeline__rail { display: flex; flex-direction: column; align-items: center; }
.timeline__k {
  width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid; place-items: center;
  border: 1px solid var(--c); background: var(--cbg); color: var(--c);
  font-family: var(--mono); font-size: 10px; font-weight: 500;
}
.timeline__rail::after { content: ""; flex: 1; width: 1px; background: var(--line-2); margin: 6px 0; }
.timeline__body { padding-bottom: 28px; }
.timeline__head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.timeline__actor { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; color: var(--c); }
.timeline h3 { font-size: 16px; font-weight: 500; letter-spacing: -.01em; margin: 0; }
.timeline p { font-size: 14px; line-height: 1.55; color: var(--dim); margin: 0; max-width: 520px; text-wrap: pretty; }
.timeline .tags { margin-top: 10px; }

.phone { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 12px; max-width: 340px; width: 100%; margin: 0 auto; }
.phone__label { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--mute); }
.phone__body {
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 22px; background: var(--card); padding: 16px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5); display: flex; flex-direction: column; gap: 12px;
}
.phone__status { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--dim); }
.phone__status span:first-child { display: flex; align-items: center; gap: 6px; }
.phone__alert { border: 1px solid var(--acc-40); background: var(--acc-08); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.phone__meta { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; font-family: var(--mono); color: var(--acc); }
.phone__title { font-size: 14px; font-weight: 500; line-height: 1.35; }
.phone__sub { font-size: 12px; color: var(--dim); line-height: 1.45; }
.phone__actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.phone__actions span { flex: 1; text-align: center; font-size: 12px; font-weight: 500; border: 1px solid var(--line-3); border-radius: 8px; padding: 8px 10px; }
.phone__actions span:first-child { background: var(--acc); color: var(--bg); border-color: var(--acc); }
.phone__actions span:last-child { color: var(--dim); }
.phone__chat { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.phone__chat q { font-size: 12.5px; line-height: 1.45; color: var(--code); quotes: "\201C" "\201D"; }
.phone__chat div:last-child { display: flex; gap: 6px; margin-top: 2px; }
.phone__chat div:last-child span { font-size: 11px; border: 1px solid var(--line-3); border-radius: 6px; padding: 4px 8px; color: var(--dim); }
.phone__chat div:last-child span:first-child { color: var(--ink); }
.phone__chat div:last-child span:last-child { margin-left: auto; }
.phone__foot { font-family: var(--mono); font-size: 10px; color: var(--mute); text-align: center; }

/* integrations */
.integrations { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.integration {
  border: 1px solid var(--line); border-radius: 12px; padding: 16px; background: var(--bg-2);
  display: flex; flex-direction: column; gap: 12px; transition: border-color .2s;
}
.integration:hover { border-color: var(--line-hover); }
.integration__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mark {
  width: 32px; height: 32px; border-radius: 8px; background: var(--raised); flex: none;
  display: grid; place-items: center; font-family: var(--mono); font-size: 11px; font-weight: 500;
  color: var(--ink);
}
.mark svg { display: block; }
.integration h3 { font-size: 14px; font-weight: 500; margin: 0; }
.integration p { font-size: 12.5px; color: var(--dim); margin: 3px 0 0; line-height: 1.45; }
.integration__team { font-family: var(--mono); font-size: 10px; color: var(--mute); letter-spacing: .04em; }

/* pricing: the shape of the plan, without numbers */
.pricing__head { text-align: center; margin-bottom: 44px; }
.pricing__head .eyebrow { justify-content: center; }
.pricing__head .h2, .pricing__head .lede { margin-left: auto; margin-right: auto; }
.pricing__head .h2 { margin-bottom: 16px; }
.pricing__head .lede { margin-bottom: 0; }
.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.tier { border: 1px solid var(--line); border-radius: 16px; padding: 26px 24px; background: var(--bg); display: flex; flex-direction: column; gap: 18px; }
.tier__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tier h3 { font-size: 16px; font-weight: 500; margin: 0; }
.tier__price { font-size: 28px; font-weight: 600; letter-spacing: -.03em; color: var(--dim); }
.tier__price small { font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--mute); }
.tier__for { font-size: 13.5px; color: var(--dim); line-height: 1.5; margin: 0; }
.tier ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 13.5px; color: var(--code); }
.tier li { display: flex; gap: 10px; align-items: baseline; }
.tier li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--acc); flex: none; transform: translateY(-2px); }
.pricing__foot { text-align: center; margin: 24px auto 0; max-width: 720px; line-height: 1.6; }
.pricing__cta { text-align: center; margin-top: 28px; }

/* waitlist */
.cta {
  position: relative; overflow: hidden; text-align: center;
  border: 1px solid var(--line-2); border-radius: 20px; padding: 64px 32px;
  background: radial-gradient(60% 100% at 50% 100%, rgba(91, 157, 255, .18), transparent 70%), var(--bg-2);
}
.cta h2 { font-size: clamp(28px, 3.6vw, 44px); letter-spacing: -.03em; font-weight: 600; line-height: 1.1; margin: 0 0 14px; text-wrap: balance; }
.cta > p { color: var(--dim); margin: 0 auto 28px; font-size: 16px; max-width: 520px; line-height: 1.55; }
.cta a:not(.btn) { color: var(--acc); text-decoration: underline; text-underline-offset: 3px; }
.wait__form { max-width: 460px; margin: 0 auto; }
.field { display: flex; gap: 8px; flex-wrap: wrap; }
.field input {
  flex: 1 1 220px; min-width: 0; height: 46px; padding: 0 14px; font-size: 15px;
  color: var(--ink); background: var(--bg); border: 1px solid var(--line-3); border-radius: 10px;
}
.field input::placeholder { color: var(--mute); }
.field input:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-16); }
.field .btn { flex: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__foot { margin: 12px 0 0; font-size: 12px; color: var(--mute); }
.form__status { min-height: 1.5em; margin-top: 16px; font-size: 14px; color: var(--soft); }
.form__status strong { color: var(--ink); font-weight: 500; }

/* footer */
.end { padding-top: 96px; border-top: 1px solid rgba(255, 255, 255, .06); }
.foot { padding-bottom: 40px; }
.foot__cols { display: flex; flex-wrap: wrap; gap: 40px 32px; padding-top: 64px; font-size: 13.5px; }
.foot__brand { flex: 2 1 220px; min-width: 200px; }
.foot__brand .brand { margin-bottom: 10px; }
.foot__brand p { margin: 0; color: var(--mute); font-family: var(--mono); font-size: 12px; line-height: 1.7; }
.foot__col { display: flex; flex-direction: column; gap: 10px; min-width: 140px; flex: 1 1 140px; }
.foot__col h2 { margin: 0 0 4px; font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: .08em; color: var(--mute); }
.foot__col ul { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.foot__col a { color: var(--dim); }
.foot__col a:hover { color: var(--acc); }
.foot__tm { margin: 16px 0 0; line-height: 1.6; }
.foot__base {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 48px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .06);
  font-size: 12px; color: var(--mute);
}

/* the floating demo bubble: a link to the waitlist, not a fake chat */
.float {
  position: fixed; right: 24px; bottom: 24px; z-index: 30;
  display: flex; align-items: center; gap: 10px;
}
.float__label {
  font-family: var(--mono); font-size: 11px; color: var(--code); background: var(--card);
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 8px; padding: 7px 10px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .5);
}
.float__btn {
  width: 56px; height: 56px; border-radius: 50%; background: var(--acc); opacity: .8;
  display: grid; place-items: center; box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
}
.float__btn::before { content: ""; width: 20px; height: 16px; border-radius: 6px 6px 6px 1px; background: var(--bg); }
.float:hover .float__btn { opacity: 1; }
.float:hover .float__label { color: var(--ink); }
/* on a phone the nav already offers the waitlist, and the bubble would sit on the text */
@media (max-width: 560px) { .float { display: none; } }

/* ------------------------------------------------------------------ demo stage
   A fixed 1120×520 canvas, scaled to fit by --s (set by supportgenius.js from
   the measured width; the media queries are the no-JS approximation). Every
   element is placed in canvas pixels, so the geometry matches the SVG paths. */

.demo { position: relative; max-width: 1120px; margin: 72px auto 0; }
.demo__bar { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.stage { --s: 1; position: relative; height: calc(520px * var(--s)); }
.stage__canvas {
  position: absolute; left: 0; top: 0; width: 1120px; height: 520px;
  transform-origin: 0 0; transform: scale(var(--s));
  font-family: var(--sans);
}
@media (max-width: 1168px) { .stage { --s: .78; } }
@media (max-width: 900px)  { .stage { --s: .6; } }
@media (max-width: 700px)  { .stage { --s: .45; } }
@media (max-width: 520px)  { .stage { --s: .31; } }
.demo__caption { text-align: center; margin: 28px 0 0; }

.stage__canvas > svg { position: absolute; inset: 0; overflow: visible; }
.stage .flow { animation: dash 1.6s linear infinite; }
.stage .pkt { filter: drop-shadow(0 0 6px #5b9dff); }

.cv-label { position: absolute; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--mute); }
.cv-chips { position: absolute; left: 0; top: 14px; width: 300px; display: flex; gap: 4px; font-family: var(--mono); font-size: 9px; letter-spacing: .04em; }
.cv-chips span { flex: 1; text-align: center; border: 1px solid var(--line-2); border-radius: 6px; padding: 4px 0; color: var(--mute); }

.widget {
  position: absolute; left: 0; top: 48px; width: 300px; height: 432px; overflow: hidden;
  background: var(--card); border: 1px solid var(--line-2); border-radius: 16px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5); display: flex; flex-direction: column;
}
.widget__head { position: relative; height: 42px; border-bottom: 1px solid var(--line); font-size: 13px; }
.widget__head > div, .widget__foot > div { position: absolute; inset: 0; display: flex; align-items: center; }
.widget__head > div { gap: 8px; padding: 0 14px; }
.widget__head b { font-weight: 500; }
.live { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); flex: none; }
.badge { margin-left: auto; font-family: var(--mono); font-size: 10px; color: var(--dim); border: 1px solid rgba(255, 255, 255, .12); border-radius: 4px; padding: 2px 6px; }
.clock { font-family: var(--mono); font-size: 10px; color: var(--dim); }
.widget__body { position: relative; flex: 1; padding: 14px; font-size: 12.5px; line-height: 1.45; }
.bub-me {
  position: absolute; right: 14px; top: 14px; max-width: 210px;
  background: var(--acc); color: var(--bg); padding: 9px 12px; border-radius: 14px 14px 4px 14px;
}
.bub-ai { position: absolute; left: 14px; top: 82px; max-width: 236px; }
.bub-ai > div:first-child { background: var(--raised); padding: 9px 12px; border-radius: 14px 14px 14px 4px; color: var(--ink); }
.cite {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 6px;
  font-family: var(--mono); font-size: 10px; color: var(--dim); border: 1px solid var(--line-2); border-radius: 6px; padding: 4px 8px;
}
.cite::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--acc); }
.typing {
  position: absolute; left: 14px; top: 82px; display: flex; gap: 4px;
  background: var(--raised); padding: 12px 14px; border-radius: 14px 14px 14px 4px;
}
.typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--dim); }
.typing i:nth-child(2) { opacity: .6; } .typing i:nth-child(3) { opacity: .3; }
.widget__foot { position: relative; height: 54px; border-top: 1px solid var(--line); }
.widget__foot > div { gap: 10px; padding: 10px 12px; }
.input {
  flex: 1; display: flex; align-items: center; gap: 3px; height: 34px; padding: 0 12px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px; font-size: 11px; color: var(--mute);
}
.input .badge { font-size: 9px; padding: 2px 5px; }
.mic { width: 34px; height: 34px; border-radius: 10px; background: var(--acc); display: grid; place-items: center; flex: none; animation: pulse 1.6s ease-out infinite; }
.mic::before { content: ""; width: 8px; height: 13px; border-radius: 4px; background: var(--bg); }
.hang { width: 34px; height: 34px; border-radius: 10px; background: var(--rec); display: grid; place-items: center; flex: none; }
.hang::before { content: ""; width: 14px; height: 5px; border-radius: 3px; background: var(--bg); }
.wave { width: 3px; height: 16px; border-radius: 2px; background: var(--acc); animation: wave 1s ease-in-out infinite; }
.wave:nth-child(2) { animation-delay: .15s; } .wave:nth-child(3) { animation-delay: .3s; }
.wave:nth-child(4) { animation-delay: .45s; } .wave:nth-child(5) { animation-delay: .6s; } .wave:nth-child(6) { animation-delay: .75s; }
.listening { margin-left: 8px; font-size: 11px; color: var(--dim); }

.core {
  position: absolute; left: 504px; top: 204px; width: 112px; height: 112px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #1a1f27, #0a0c10); display: grid; place-items: center;
  animation: core var(--loop) linear infinite;
}
.core__ring { width: 72px; height: 72px; border-radius: 50%; border: 1px dashed rgba(91, 157, 255, .7); display: grid; place-items: center; animation: ring var(--loop) linear infinite; }
.core__ring::before { content: ""; width: 26px; height: 26px; border-radius: 8px; background: var(--acc); box-shadow: 0 0 24px var(--acc); }
.node {
  position: absolute; width: 92px; height: 30px; display: grid; place-items: center;
  border: 1px solid var(--line-2); border-radius: 8px; background: var(--card); color: var(--dim); font-size: 11px;
}

.dest {
  position: absolute; left: 840px; width: 280px; height: 60px; display: flex; align-items: center; gap: 12px; padding: 0 14px;
  border: 1px solid var(--line-2); border-radius: 12px; background: var(--card);
}
.dest .mark { font-size: 11px; }
.dest__txt { position: relative; flex: 1; min-width: 0; height: 36px; }
.dest__txt > div { position: absolute; inset: 0; }
.dest__name { font-size: 13px; font-weight: 500; }
.dest__sub { font-size: 11px; color: var(--dim); font-family: var(--mono); }
.dest__issue { font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dest__issue b { font-weight: 500; color: var(--acc); }
.lbls { display: flex; gap: 4px; margin-top: 4px; overflow: hidden; }
.lbl { flex: none; white-space: nowrap; font-family: var(--mono); font-size: 9px; padding: 1px 6px; border-radius: 4px; background: rgba(255, 255, 255, .08); color: var(--dim); }
.lbl--bug { background: rgba(215, 58, 74, .2); color: var(--bad); }
.lbl--hi { background: rgba(255, 170, 0, .18); color: var(--warn); }
.lbl--ok { background: rgba(61, 220, 151, .18); color: var(--ok); }
.avatar { position: relative; border-radius: 50%; }
.avatar::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%; background: var(--ok); border: 2px solid var(--card); }

/* ------------------------------------------------------------------ the loop
   One 32 s cycle, three scenes: A web widget (billing, answered), B iOS SDK
   (500 on export, escalated to engineering), C phone line (volume pricing,
   passed to sales). Percentages are the canvas's own timings. */

.a-msgA { animation: msgA var(--loop) linear infinite; }
.a-typA { animation: typA var(--loop) linear infinite; }
.a-repA { animation: repA var(--loop) linear infinite; }
.a-msgB { animation: msgB var(--loop) linear infinite; }
.a-typB { animation: typB var(--loop) linear infinite; }
.a-repB { animation: repB var(--loop) linear infinite; }
.a-msgC { animation: msgC var(--loop) linear infinite; }
.a-typC { animation: typC var(--loop) linear infinite; }
.a-repC { animation: repC var(--loop) linear infinite; }
.a-sceneA { animation: sceneA var(--loop) linear infinite; }
.a-sceneB { animation: sceneB var(--loop) linear infinite; }
.a-sceneC { animation: sceneC var(--loop) linear infinite; }
.a-chipA { animation: chipA var(--loop) linear infinite; }
.a-chipB { animation: chipB var(--loop) linear infinite; }
.a-chipC { animation: chipC var(--loop) linear infinite; }
.a-nodeA { animation: nodeA var(--loop) linear infinite; }
.a-nodeB { animation: nodeB var(--loop) linear infinite; }
.a-nodeAC { animation: nodeAC var(--loop) linear infinite; }
.a-nodeABC { animation: nodeABC var(--loop) linear infinite; }
/* destination cards light up one after another: --d is the card's delay as a fraction of the loop */
.a-card { animation: card var(--loop) linear calc(var(--loop) * var(--d, 0)) infinite; }
.a-card .a-base { animation: cardBase var(--loop) linear calc(var(--loop) * var(--d, 0)) infinite; }
.a-card .a-issue { opacity: 0; animation: cardIssue var(--loop) linear calc(var(--loop) * var(--d, 0)) infinite; }
.a-cardSF { animation: cardSF var(--loop) linear infinite; }
.a-cardSF .a-base { animation: cardSFBase var(--loop) linear infinite; }
.a-cardSF .a-issue { opacity: 0; animation: cardSFLead var(--loop) linear infinite; }
.a-msgA, .a-msgB, .a-msgC, .a-typA, .a-typB, .a-typC, .a-repA, .a-repB, .a-repC, .a-sceneB, .a-sceneC { opacity: 0; }

@keyframes msgA { 0%, 1.5% { opacity: 0; transform: translateY(8px) } 3%, 20% { opacity: 1; transform: none } 22%, 100% { opacity: 0; transform: none } }
@keyframes typA { 0%, 7% { opacity: 0 } 8%, 13% { opacity: 1 } 14%, 100% { opacity: 0 } }
@keyframes repA { 0%, 14% { opacity: 0; transform: translateY(8px) } 15.5%, 20% { opacity: 1; transform: none } 22%, 100% { opacity: 0; transform: none } }
@keyframes msgB { 0%, 24% { opacity: 0; transform: translateY(8px) } 25.5%, 68% { opacity: 1; transform: none } 70%, 100% { opacity: 0; transform: none } }
@keyframes typB { 0%, 30% { opacity: 0 } 31%, 36% { opacity: 1 } 37%, 100% { opacity: 0 } }
@keyframes repB { 0%, 37% { opacity: 0; transform: translateY(8px) } 39%, 68% { opacity: 1; transform: none } 70%, 100% { opacity: 0; transform: none } }
@keyframes msgC { 0%, 73% { opacity: 0; transform: translateY(8px) } 74.5%, 98% { opacity: 1; transform: none } 99.5%, 100% { opacity: 0; transform: none } }
@keyframes typC { 0%, 79% { opacity: 0 } 80%, 86% { opacity: 1 } 87%, 100% { opacity: 0 } }
@keyframes repC { 0%, 87% { opacity: 0; transform: translateY(8px) } 89%, 98% { opacity: 1; transform: none } 99.5%, 100% { opacity: 0; transform: none } }
@keyframes core {
  0%, 4%, 8%, 29%, 35%, 78%, 84%, 100% { box-shadow: 0 0 0 0 rgba(91, 157, 255, 0), inset 0 0 0 1px rgba(255, 255, 255, .1) }
  6%, 32%, 81% { box-shadow: 0 0 0 22px rgba(91, 157, 255, .14), 0 0 60px rgba(91, 157, 255, .5), inset 0 0 0 1px #5b9dff }
}
@keyframes ring { 0%, 4%, 8%, 29%, 35%, 78%, 84%, 100% { opacity: .35; transform: scale(1) } 6%, 32%, 81% { opacity: 1; transform: scale(1.06) } }
@keyframes nodeA {
  0%, 7% { border-color: rgba(255, 255, 255, .1); color: #9aa3b2; background: #0f1216 }
  8%, 12% { border-color: #5b9dff; color: #fff; background: rgba(91, 157, 255, .16) }
  14%, 100% { border-color: rgba(255, 255, 255, .1); color: #9aa3b2; background: #0f1216 }
}
@keyframes nodeB {
  0%, 30% { border-color: rgba(255, 255, 255, .1); color: #9aa3b2; background: #0f1216 }
  31%, 34% { border-color: #5b9dff; color: #fff; background: rgba(91, 157, 255, .16) }
  36%, 100% { border-color: rgba(255, 255, 255, .1); color: #9aa3b2; background: #0f1216 }
}
@keyframes nodeAC {
  0%, 7% { border-color: rgba(255, 255, 255, .1); color: #9aa3b2; background: #0f1216 }
  8%, 12% { border-color: #5b9dff; color: #fff; background: rgba(91, 157, 255, .16) }
  14%, 79% { border-color: rgba(255, 255, 255, .1); color: #9aa3b2; background: #0f1216 }
  80%, 83% { border-color: #5b9dff; color: #fff; background: rgba(91, 157, 255, .16) }
  85%, 100% { border-color: rgba(255, 255, 255, .1); color: #9aa3b2; background: #0f1216 }
}
@keyframes nodeABC {
  0%, 7% { border-color: rgba(255, 255, 255, .1); color: #9aa3b2; background: #0f1216 }
  8%, 12% { border-color: #5b9dff; color: #fff; background: rgba(91, 157, 255, .16) }
  14%, 30% { border-color: rgba(255, 255, 255, .1); color: #9aa3b2; background: #0f1216 }
  31%, 34% { border-color: #5b9dff; color: #fff; background: rgba(91, 157, 255, .16) }
  36%, 79% { border-color: rgba(255, 255, 255, .1); color: #9aa3b2; background: #0f1216 }
  80%, 83% { border-color: #5b9dff; color: #fff; background: rgba(91, 157, 255, .16) }
  85%, 100% { border-color: rgba(255, 255, 255, .1); color: #9aa3b2; background: #0f1216 }
}
@keyframes card {
  0%, 38.5% { border-color: rgba(255, 255, 255, .1); background: #0f1216; box-shadow: none }
  40%, 46% { border-color: #5b9dff; background: rgba(91, 157, 255, .08); box-shadow: 0 0 40px rgba(91, 157, 255, .25) }
  47.5%, 100% { border-color: rgba(255, 255, 255, .1); background: #0f1216; box-shadow: none }
}
@keyframes cardBase { 0%, 39% { opacity: 1 } 40.5%, 46% { opacity: 0 } 47.5%, 100% { opacity: 1 } }
@keyframes cardIssue { 0%, 39% { opacity: 0; transform: translateY(4px) } 40.5%, 46% { opacity: 1; transform: none } 47.5%, 100% { opacity: 0 } }
@keyframes cardSF {
  0%, 86% { border-color: rgba(255, 255, 255, .1); background: #0f1216; box-shadow: none }
  87.5%, 98% { border-color: #5b9dff; background: rgba(91, 157, 255, .08); box-shadow: 0 0 40px rgba(91, 157, 255, .25) }
  99.5%, 100% { border-color: rgba(255, 255, 255, .1); background: #0f1216; box-shadow: none }
}
@keyframes cardSFBase { 0%, 86.5% { opacity: 1 } 88%, 98% { opacity: 0 } 99.5%, 100% { opacity: 1 } }
@keyframes cardSFLead { 0%, 86.5% { opacity: 0; transform: translateY(4px) } 88%, 98% { opacity: 1; transform: none } 99.5%, 100% { opacity: 0 } }
@keyframes sceneA { 0%, 21.5% { opacity: 1 } 23%, 98.5% { opacity: 0 } 100% { opacity: 1 } }
@keyframes sceneB { 0%, 21.5% { opacity: 0 } 23%, 69.5% { opacity: 1 } 71%, 100% { opacity: 0 } }
@keyframes sceneC { 0%, 69.5% { opacity: 0 } 71%, 98.5% { opacity: 1 } 100% { opacity: 0 } }
@keyframes chipA {
  0%, 21.5% { border-color: #5b9dff; color: #fff; background: rgba(91, 157, 255, .16) }
  23%, 98.5% { border-color: rgba(255, 255, 255, .1); color: #7b8394; background: transparent }
  100% { border-color: #5b9dff; color: #fff; background: rgba(91, 157, 255, .16) }
}
@keyframes chipB {
  0%, 21.5% { border-color: rgba(255, 255, 255, .1); color: #7b8394; background: transparent }
  23%, 69.5% { border-color: #5b9dff; color: #fff; background: rgba(91, 157, 255, .16) }
  71%, 100% { border-color: rgba(255, 255, 255, .1); color: #7b8394; background: transparent }
}
@keyframes chipC {
  0%, 69.5% { border-color: rgba(255, 255, 255, .1); color: #7b8394; background: transparent }
  71%, 98.5% { border-color: #5b9dff; color: #fff; background: rgba(91, 157, 255, .16) }
  100% { border-color: rgba(255, 255, 255, .1); color: #7b8394; background: transparent }
}
@keyframes logoSpin { to { transform: rotate(360deg) } }
@keyframes logoDot { 0%, 100% { transform: scale(1); opacity: 1 } 50% { transform: scale(.7); opacity: .7 } }
@keyframes wave { 0%, 100% { transform: scaleY(.3) } 50% { transform: scaleY(1) } }
@keyframes dash { to { stroke-dashoffset: -24 } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(91, 157, 255, .5) } 100% { box-shadow: 0 0 0 18px rgba(91, 157, 255, 0) } }
@keyframes rise { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }

/* Reduced motion: everything stops. The demo freezes on one readable frame
   (42% of the loop: the iOS conversation, escalated, with the issue filed)
   instead of collapsing to its invisible end state. supportgenius.js pauses
   the SVG packets at the same moment. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01s !important; animation-iteration-count: 1 !important; transition: none !important; }
  .stage *, .stage *::before, .stage *::after {
    animation-duration: var(--loop) !important;
    animation-delay: calc(var(--loop) * -.42) !important;
    animation-iteration-count: infinite !important;
    animation-play-state: paused !important;
  }
  .stage .pkt { display: none; }
}