/* ab-bg-word-canon */

/* ============================================================================
   BACKGROUND WORDS - canonical look (one definition for the whole site)
   Orbitron 900, faint brand gradient. The SIZE and POSITION are computed per
   word by ab-bg-word-place so every word lands big and centred behind its
   title, identically on every page. The clamp below is only a pre-paint
   fallback so nothing flashes tiny before the script runs.
   ========================================================================== */
.ab-bg-word{
  position:absolute; top:0; left:0;
  font-family:'Orbitron','Space Grotesk',sans-serif; font-weight:900;
  font-size:clamp(4rem,17vw,15rem); line-height:.92; letter-spacing:-.03em;
  white-space:nowrap; pointer-events:none; user-select:none; z-index:0;
  background-image:linear-gradient(168deg, rgba(123,47,190,.085) 0%, rgba(147,51,234,.055) 42%, rgba(99,102,241,.038) 72%, rgba(6,182,212,.028) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
*:has(> .ab-bg-word){position:relative}

/* ab-headline-font */

/* ============================================================================
   HEADLINE TYPEFACE - one face, no swap
   The hero used to paint in Plus Jakarta Sans and then jump to Space Grotesk a
   second later, once that webfont finished loading. Plus Jakarta Sans is the
   face the page is designed around, so it is pinned here for every heading,
   with enough specificity to beat the later rules that caused the swap.
   ========================================================================== */
.font-headline,
.hero-title,
.free-h1,
h1, h2, h3,
h1.font-headline, h2.font-headline, h3.font-headline,
[class*="font-headline"],
[id^="panel-"] h1, [id^="panel-"] h2, [id^="panel-"] h3,
.csec-title, [class*="sec-title"], [class*="section-title"], [class*="-heading"],
h2.csec-title, h3.csec-title,
[id^="panel-"] h1.hero-title, [id^="panel-"] .font-headline,
#panel-apex h1.hero-title, #panel-apex h2, #panel-apex h3{
  font-family:'Plus Jakarta Sans','PJS Fallback','Space Grotesk',sans-serif !important;
}
/* keep the weight the page paints with first, so nothing thins out on load */
.hero-title, .free-h1, .font-black,
[id^="panel-"] h1.hero-title, [id^="panel-"] .font-black,
#panel-apex h1.hero-title{ font-weight:800 !important; }

/* ab-tab-title-font */

/* ============================================================================
   TAB STRIP TYPEFACE
   The section tabs now wear the same face as the page titles (Space Grotesk),
   so "Individuals / Creators / Brokers" reads like "AlgoBars is free." and
   "Type One Sentence." rather than a separate UI font.
   ========================================================================== */
.ab-tab, .ab-tab-strip .ab-tab, button.ab-tab, a.ab-tab{
  font-family:'Plus Jakarta Sans','PJS Fallback','Space Grotesk',sans-serif !important;
  font-weight:800 !important;
  letter-spacing:-.015em !important;
}

/* ab-footer-contact-rows */

/* ============================================================================
   FOOTER CONTACT STRIP - two tidy rows on phones
   Was: brand, socials, then the four contact pills wrapping over three lines.
   Now: the five socials share one row and the four pills share the next, each
   pill a compact icon-over-label tile. Desktop is unchanged.
   ========================================================================== */
@media (max-width:760px){
  .footer-contact{
    flex-direction:column !important; align-items:center !important;
    gap:14px !important; padding-left:16px !important; padding-right:16px !important;
  }
  /* row 1: the socials, always on one line */
  .footer-socials{
    display:flex !important; flex-wrap:nowrap !important;
    gap:8px !important; justify-content:center !important; width:100%;
  }
  .footer-socials a{width:38px !important; height:38px !important; flex:0 0 auto}

  /* row 2: the four contact pills, one line, icon above a short label */
  .footer-pills{
    display:flex !important; flex-wrap:nowrap !important;
    gap:6px !important; justify-content:center !important;
    width:100% !important; max-width:360px;
  }
  .footer-pills .footer-pill{
    flex:1 1 0 !important; min-width:0 !important;
    flex-direction:column !important; align-items:center !important; justify-content:center !important;
    gap:3px !important; padding:9px 4px !important; text-align:center !important;
    font-size:0 !important; line-height:1.15 !important; border-radius:10px !important;
  }
  .footer-pills .footer-pill > span{font-size:0 !important}
  .footer-pills .footer-pill svg{width:15px !important; height:15px !important; flex:0 0 auto}
  .footer-pills .footer-pill::after{
    font-size:10px; font-weight:700; letter-spacing:.01em; color:inherit; display:block;
  }
  .footer-pills .footer-pill:nth-child(1)::after{content:"24/7 Call"}
  .footer-pills .footer-pill:nth-child(2)::after{content:"Email"}
  .footer-pills .footer-pill:nth-child(3)::after{content:"Live chat"}
  .footer-pills .footer-pill:nth-child(4)::after{content:"Feedback"}
  /* the phone pill has no icon of its own: give it one so the row reads evenly */
  .footer-pills .footer-pill:nth-child(1)::before{
    content:""; width:15px; height:15px; flex:0 0 auto; background:currentColor;
    -webkit-mask:var(--ab-phone-mask) center/contain no-repeat;
            mask:var(--ab-phone-mask) center/contain no-repeat;
  }
}
@media (max-width:340px){
  .footer-pills .footer-pill::after{font-size:9px}
  .footer-socials a{width:34px !important; height:34px !important}
}
:root{--ab-phone-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");}

/* ab-guarantee-bar-css */

/* the trust strip stacks two-by-two on phones instead of running off the edge */
@media (max-width:768px){
  .guarantee-bar{
    display:grid !important; grid-template-columns:1fr 1fr !important;
    gap:.6rem .9rem !important; padding:0 1.25rem !important;
  }
  .guarantee-bar > div[style*="flex:1"]{min-width:0 !important; width:auto !important}
  .guarantee-bar .footer-divider{display:none !important}
}
@media (max-width:360px){
  .guarantee-bar{gap:.5rem .7rem !important}
  .guarantee-bar span{font-size:11.5px !important}
}

/* ab-mobile-wider-pills */

/* the phone pill is gone and the strip is empty on phones - Log In and Sign Up
   grow into the freed room so the bar reads full and balanced */
@media (max-width:760px){
  #abTabbar .ab-tabbar-actions,#pricingHeader .ab-tabbar-actions{
    flex:1 1 auto !important; justify-content:flex-end !important;
  }
  #abTabbar .pill-login,#abTabbar .pill-signup,
  #pricingHeader .pill-login,#pricingHeader .pill-signup{
    flex:1 1 auto !important; max-width:150px;
    justify-content:center !important; text-align:center;
  }
}

/* ab-footer-balance */

/* footer columns: natural heights, balanced link counts, no stretched voids */
footer .grid{align-items:start !important}
/* the compiled Tailwind here has no md:grid-cols-4, so set the columns directly */
@media (min-width:768px){
  footer .grid{grid-template-columns:repeat(4,minmax(0,1fr)) !important}
}
@media (max-width:760px){
  footer .grid{row-gap:26px !important}
}
/* status strip: wraps and centres on phones instead of running off-screen */
@media (max-width:760px){
  .ab-status-row{flex-wrap:wrap !important; gap:10px 18px !important; justify-content:center !important; width:100% !important}
}

/* ab-corner-chat */

/* ============================================================================
   CALL OR CHAT NOW - the corner button from the AI demo, on every page.
   Phone control removed from the header; this carries both call and chat.
   ========================================================================== */
#abTabbar .pill-call, #pricingHeader .pill-call{display:none !important}
.ab-livechat{
  position:fixed; right:18px; bottom:18px; z-index:90;
  display:inline-flex; align-items:center; gap:9px;
  font-family:'Inter',system-ui,sans-serif; font-size:13.5px; font-weight:600;
  letter-spacing:.01em; color:#fff; text-decoration:none; white-space:nowrap;
  background:linear-gradient(135deg,#7B2FBE 0%,#9333EA 52%,#06B6D4 100%);
  border:1px solid rgba(255,255,255,.20); border-radius:999px;
  padding:13px 20px; min-height:48px;
  box-shadow:0 12px 30px rgba(123,47,190,.34), inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform .16s ease, box-shadow .26s ease;
}
.ab-livechat:hover{transform:translateY(-1px);box-shadow:0 16px 38px rgba(123,47,190,.42)}
.ab-livechat:active{transform:scale(.97)}
.ab-livechat-ico{width:17px;height:17px;flex:0 0 auto}
.ab-livechat-dot{width:8px;height:8px;border-radius:50%;background:#34d399;flex:0 0 auto;box-shadow:0 0 0 3px rgba(52,211,153,.28)}
@media (max-width:760px){
  .ab-livechat{right:12px;bottom:12px;padding:12px 16px;font-size:12.5px;min-height:46px}
}
@media (max-width:380px){
  .ab-livechat-txt{display:none}
  .ab-livechat{padding:12px 14px}
}

/* ab-eyebrow-v2: hero eyebrow pill, one purple everywhere.
   .hero-pill and .eyebrow are the named cases; pages that build the pill from
   utility classes get tagged .ab-eyebrow by the script below. */
.hero-pill, .eyebrow, .free-eyebrow, .ab-eyebrow,
.pill:not(.pill-login):not(.pill-signup):not(.pill-call):not(.footer-pill){
  color:#7B2FBE !important;
  background:#F2EAF8 !important;
  background-image:none !important;
  border:1px solid #ECDEFB !important;
}
.hero-pill *, .eyebrow *, .ab-eyebrow *,
.pill:not(.pill-login):not(.pill-signup):not(.pill-call):not(.footer-pill) *{
  color:#7B2FBE !important;
}
.hero-pill .live, .eyebrow .live, .ab-eyebrow .live, .pill .live{background:#7B2FBE !important}

/* ab-word-strength: the watermark was drawn at 8.6% purple, which vanished on
   lighter heroes. Lifted so it reads on every page background. */
.ab-bg-word{
  background-image:linear-gradient(168deg,
    rgba(123,47,190,.155) 0%,
    rgba(147,51,234,.115) 42%,
    rgba(99,102,241,.085) 72%,
    rgba(6,182,212,.065) 100%) !important;
}

/* ab-pill-v3: ONE eyebrow pill treatment everywhere - purple ink, purple
   outline, white fill, same typeface and size, and a leading purple dot. */
.hero-pill, .eyebrow, .free-eyebrow, .ab-eyebrow,
.pill:not(.pill-login):not(.pill-signup):not(.pill-call):not(.footer-pill){
  color:#7B2FBE !important;
  background:#F2EAF8 !important;
  background-image:none !important;
  border:1.5px solid #7B2FBE !important;
  border-radius:999px !important;
  font-family:'Plus Jakarta Sans','Space Grotesk',sans-serif !important;
  font-size:11px !important;
  font-weight:800 !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
  line-height:1 !important;
  padding:9px 16px !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  box-shadow:none !important;
}
.hero-pill *, .eyebrow *, .ab-eyebrow *, .free-eyebrow *,
.pill:not(.pill-login):not(.pill-signup):not(.pill-call):not(.footer-pill) *{
  color:#7B2FBE !important;
  font-family:inherit !important;
  font-size:inherit !important;
  font-weight:inherit !important;
  letter-spacing:inherit !important;
  text-transform:inherit !important;
}
/* the leading dot: use the page's own marker where it exists, otherwise draw one */
.hero-pill .live, .eyebrow .live, .ab-eyebrow .live, .free-eyebrow .live,
.pill:not(.pill-login):not(.pill-signup):not(.pill-call) .live{
  background:#7B2FBE !important; width:6px !important; height:6px !important;
  border-radius:50% !important; flex:0 0 auto !important; box-shadow:none !important;
}
.hero-pill:not(:has(.live)):not(:has(svg))::before,
.eyebrow:not(:has(.live)):not(:has(svg))::before,
.ab-eyebrow:not(:has(.live)):not(:has(svg))::before,
.free-eyebrow:not(:has(.live)):not(:has(svg))::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:#7B2FBE; flex:0 0 auto; display:inline-block;
}
.hero-pill svg, .eyebrow svg, .ab-eyebrow svg{
  width:12px !important; height:12px !important; color:#7B2FBE !important; flex:0 0 auto;
}

/* ab-cat-pill: the pricing audience labels ("For creators", "For brokers & prop
   firms") were plain purple text. Give them the same outlined pill and a small
   leading mark so they read as the pills they sit beside. */
.cat{
  display:inline-flex !important; align-items:center !important; gap:8px !important;
  color:#7B2FBE !important;
  background:#F2EAF8 !important;
  border:1.5px solid #7B2FBE !important;
  border-radius:999px !important;
  padding:8px 15px !important;
  font-family:'Plus Jakarta Sans','Space Grotesk',sans-serif !important;
  font-size:11px !important; font-weight:800 !important;
  letter-spacing:.12em !important; text-transform:uppercase !important;
  line-height:1 !important; width:auto !important;
}
.cat::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:#7B2FBE; flex:0 0 auto; display:inline-block;
}

/* ab-pill-v4: doubled class raises specificity above same-weight utility
   classes (e.g. a text-black) that were tying with the rule above. */
.ab-eyebrow.ab-eyebrow, .hero-pill.hero-pill, .eyebrow.eyebrow, .cat.cat{
  color:#7B2FBE !important;
  background:#F2EAF8 !important;
  background-image:none !important;
  border-color:#7B2FBE !important;
}
.ab-eyebrow.ab-eyebrow *, .hero-pill.hero-pill *, .eyebrow.eyebrow *{
  color:#7B2FBE !important;
}

/* ab-dot-v5: the leading dot is authored under several different class names.
   .live was covered; .hero-pill-dot was not, so it rendered green on faq,
   light-purple on concepts and fully transparent on glossary. One dot now. */
.hero-pill .hero-pill-dot, .eyebrow .hero-pill-dot, .ab-eyebrow .hero-pill-dot,
.pill .hero-pill-dot, .hero-pill-dot,
.hero-pill .live, .eyebrow .live, .ab-eyebrow .live, .pill .live,
.hero-pill .dot, .eyebrow .dot, .ab-eyebrow .dot{
  width:6px !important; height:6px !important;
  min-width:6px !important; min-height:6px !important;
  max-width:6px !important; max-height:6px !important;
  border-radius:50% !important;
  background:#7B2FBE !important;
  background-image:none !important;
  background-color:#7B2FBE !important;
  box-shadow:none !important;
  flex:0 0 auto !important;
  display:inline-block !important;
  animation:none !important;
  border:0 !important;
  padding:0 !important; margin:0 !important;
}
/* a pill that has a real dot element must not also draw the pseudo one */
.hero-pill:has(.hero-pill-dot)::before,
.eyebrow:has(.hero-pill-dot)::before,
.ab-eyebrow:has(.hero-pill-dot)::before,
.hero-pill:has(.live)::before,
.ab-eyebrow:has(.live)::before{content:none !important}

/* ab-badge-exclude: a caption badge over a video is not a hero eyebrow */
.hero-video-badge, [class*="video-badge"], [class*="videoBadge"]{
  color:#fff !important; background:rgba(12,9,22,.72) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  font-size:10.5px !important; letter-spacing:.09em !important; font-weight:700 !important;
  padding:5px 11px !important;
}
.hero-video-badge::before, [class*="video-badge"]::before{content:none !important}
.hero-video-badge .hero-pill-dot, .hero-video-badge .live{display:none !important}