/* "The first billion-dollar solo-founder company" (assets/art/small-business-billion.js). On wide screens the closing
   words move to the left, like the home page's close, and the picture sits at the right. */
.sbb { display: none; }
@media (min-width: 901px) {
  .close-band.has-art-billion .container { max-width: var(--container) !important; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    column-gap: clamp(32px, 4vw, 80px); align-items: center; text-align: left; }
  .close-band.has-art-billion .container > * { grid-column: 1; }
  .close-band.has-art-billion .container > .sbb { display: block; grid-column: 2; grid-row: 1 / span 6; align-self: center; pointer-events: none; }
  .close-band.has-art-billion h2, .close-band.has-art-billion .lead { margin-left: 0; margin-right: 0; }
  .close-band.has-art-billion .hero-actions { justify-content: flex-start !important; }
  .close-band.has-art-billion .end-mark { justify-self: start; margin-left: 0; }
}

.sbb-odo { display: flex; justify-content: center; align-items: baseline; margin: 0 auto 4px; font-size: clamp(34px, 3.4vw, 52px); font-weight: 600;
  letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--faint); transition: color 0.6s ease; }
.sbb-cur { margin-right: 0.06em; color: var(--turquoise); }
.sbb-dig { position: relative; display: inline-block; width: 0.62em; height: 1.12em; overflow: hidden; text-align: center;
  -webkit-mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent); }
.sbb-roll { position: absolute; left: 0; right: 0; top: 0.06em; will-change: transform; }
.sbb-roll span { display: block; height: 1em; }
.sbb-dig, .sbb-comma { opacity: 0.32; transition: opacity 0.4s ease, color 0.4s ease; }
.sbb-dig.lit, .sbb-comma.lit { opacity: 1; color: var(--ink); }
.sbb-comma { width: 0.3em; text-align: center; }
.sbb-odo.done .sbb-dig, .sbb-odo.done .sbb-comma { color: var(--turquoise); text-shadow: 0 0 26px rgba(132, 181, 210, 0.55); }

.sbb-stage { position: relative; aspect-ratio: 16 / 10; }
.sbb-orbit { position: absolute; left: 13%; top: 13%; width: 74%; height: 74%; border-radius: 50%; border: 1px dashed rgba(132, 181, 210, 0.28); }
.sbb-orbit::before { content: ""; position: absolute; inset: 22%; border-radius: 50%; background: radial-gradient(circle, rgba(88, 150, 189, 0.22), transparent 70%); }
.sbb-you { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 104px; height: 104px; border-radius: 50%;
  display: grid; place-items: center; align-content: center; gap: 2px; background: var(--raised); border: 1px solid var(--turquoise);
  box-shadow: 0 0 0 10px rgba(132, 181, 210, 0.06), 0 0 50px rgba(132, 181, 210, 0.25); color: var(--ink); }
.sbb-you svg { width: 40px; height: 40px; stroke-width: 1.6; }
.sbb-you span { font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--turquoise); }

.sbb-agent { position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform; }
.sbb-bot { position: absolute; left: -23px; top: -23px; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  background: var(--panel); border: 1px solid var(--line-strong); color: var(--turquoise); transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s; }
.sbb-bot svg { width: 22px; height: 22px; stroke-width: 1.7; }
.sbb-agent.talk .sbb-bot { border-color: var(--turquoise); box-shadow: 0 0 20px rgba(132, 181, 210, 0.45); transform: scale(1.08); }
.sbb-tag { position: absolute; left: 0; top: 32px; display: flex; align-items: center; gap: 6px; padding: 6px 11px 6px 9px; border-radius: 999px; white-space: nowrap;
  background: var(--raised); border: 1px solid rgba(132, 181, 210, 0.5); color: var(--ink); font-size: 14px; font-weight: 500;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45); opacity: 0; transform: translate(-50%, -6px) scale(0.9);
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.sbb-agent.low .sbb-tag { top: auto; bottom: 32px; transform: translate(-50%, 6px) scale(0.9); }
.sbb-tag svg { width: 14px; height: 14px; stroke-width: 3; color: var(--turquoise); }
.sbb-agent.talk .sbb-tag { opacity: 1; transform: translate(-50%, 0); }
.sbb-agent.talk { z-index: 2; }
@media (prefers-reduced-motion: reduce) { .sbb * { transition: none !important; } }