--- title: "the AI plans you pay for, in one app" canonical_url: "https://superbot.gg/" last_updated: "2026-10-01" summary: "stop switching between AIs. superbot, the agent manager, puts the AI plans you pay for (Claude Code, Codex, Cursor, ChatGPT) in one app on Mac and phone." --- > Markdown twin of https://superbot.gg/ (the HTML page is canonical). > The site index for agents is /llms.txt; every content page has a twin at its path plus `.md`. already spends. \*/ @media (orientation: landscape) and (max-height: 500px) { /\* the hero's copy column is \~331px at 734px: the button gives up 8px a side so the field keeps room for its whole placeholder \*/ .hero .sb-btn.wl-go { padding: 0 var(--sp-4); } #more .ftoc { position: static; flex-wrap: wrap; justify-content: center; overflow-x: visible; padding-left: var(--sp-4); padding-right: var(--sp-4); } } /\* the whole sign-in block above the fold on a phone on its side (#16, 2026-09-28). The hero's first-view budget used to end at the email field; the legal lines and "have an invite code?" under it are part of the block, and with Apple, Google and X on (header 56) #join ended at 403 on 844x390 and 740x360, 455 on 667x375 (the email row stacked under 720px) and 491 on 932x430 (the labelled provider stack is 148px). Every short landscape phone now takes waitlist.css's one row of mark-only provider buttons (its 390px tier, restated here for the 391-500px heights: 932x430, 956x440) and the form's gaps drop to --sp-1, so 932x430 ends at 400. Two height tiers take the rest back from the headline and the "or" row, never from a 44px target. \*/ @media (orientation: landscape) and (max-height: 500px) { .hero:has(.arena) .hero-cta { margin-top: var(--sp-1); } .hero .wl { gap: var(--sp-1); } .hero .wl-pv { display: flex; flex-wrap: wrap; } .hero .wl-pv > .pv:has(> \[data-provider\]) { flex: 1 1 0; min-width: 0; } .hero .wl-pv > .pv:has(> \[data-escape\]) { flex: 1 1 0; min-width: 0; } .hero .wl-pv:has(> .pv > \[data-escape\]) > .pv:has(> \[data-provider\]) { flex: 0 0 var(--target-touch); } .hero .wl-pv > \[data-escape-hint\] { flex: 1 1 100%; } .hero .wl-pv .lu { right: 50%; transform: translate(50%, -50%); } .hero .wl .sb-btn.wl-pv-btn\[data-provider\] { display: flex; justify-content: center; align-items: center; gap: 0; padding: 0; font-size: 0; line-height: 0; overflow: hidden; } .hero .wl .wl-pv-btn\[data-provider\] svg.bi-siwa { left: 50%; } } /\* 390px and under (844x390, 667x375, 740x360): the headline and the mark take the clamp's own 20px floor (--fs-xl), a 66px lockup for 79, and the email row stays one row at every width. Under 720px the Continue's visible label is the verify form's own "Continue" (the drawn word; the button's text node, font-size 0, stays its accessible name, and the empty alt keeps the word from being read twice), which leaves the field \~200px for its placeholder at 667 where a stacked row cost 52px. \*/ @media (orientation: landscape) and (max-height: 390px) { .hero:has(.arena) h1, .hero:has(.arena) .sb-glitch { font-size: var(--fs-xl); } } @media (orientation: landscape) and (max-height: 390px) and (max-width: 719px) { .hero .wl-row { flex-direction: row; } .hero .wl .wl-row .sb-btn.wl-go { width: auto; font-size: var(--fs-sm); } .hero .wl \[data-wl-email\] .sb-btn.wl-go { gap: 0; font-size: 0; } .hero .wl \[data-wl-email\] .sb-btn.wl-go::before { all: unset; content: "Continue"; content: "Continue" / ""; font-size: var(--fs-sm); line-height: var(--lh-sm); } } /\* 380px and under (667x375, 740x360): the "or" row leaves the drawing but not the reading order (a screen reader still hears "or" between the marks and the field), and the provider row keeps --sp-2 of air above the field so the two ways in still read as two \*/ @media (orientation: landscape) and (max-height: 380px) { .hero .wl-or { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .hero .wl-pv { margin-bottom: var(--sp-1); } } /\* the "native in" rail on a phone (owner, 2026-09-25): one row that runs across the marks forever instead of hero.css's four-row logo cloud. The script at the foot appends a second copy of the list (aria-hidden, out of the tab order), so sliding the track by half its width lands exactly on the start and the loop has no seam. A touch or a focus inside the rail holds it still so a mark can be hit. Wider than 560px the copy is not rendered and the rail is hero.css's as ever. \*/ .dock .wall-list li.is-dup { display: none; } @media (max-width: 560px) { .dock { display: block; overflow: hidden; padding: var(--sp-2) 0; mask-image: linear-gradient(90deg, transparent, var(--bg) var(--sp-8), var(--bg) calc(100% - var(--sp-8)), transparent); } .dock .lab { margin: 0 0 var(--sp-1); } .dock ul.wall-list { display: flex; width: max-content; margin: 0; padding: 0; list-style: none; animation: dock-run 36s linear infinite; /\* deliberate \*/ } .dock .wall-list li, .dock .wall-list li.is-dup { display: block; } .dock:hover ul.wall-list, .dock:focus-within ul.wall-list { animation-play-state: paused; } @keyframes dock-run { to { transform: translateX(-50%); } } } /\* the rail under the form on a phone held upright (CRO pass, 2026-09-26). GA 2026-09-25..26: 86% of visitors are on a phone, 93% of those who reach the hero leave there, and 3% ever scrolled down to the rail under the stage. So on a portrait phone the rail sits straight under the waitlist form, above the stage, inside the first screen: a logo strip under the form (position borrowed, no copy) that says which tools superbot works with. Only the visual order changes: the DOM, the tab order, desktop, tablet and a phone on its side keep the rail under the stage. Loose under the form it drops the stage's bottom-edge chrome and the stage takes back its own rounded foot. \*/ @media (max-width: 560px) and (orientation: portrait) { .desk { display: flex; flex-direction: column; gap: var(--sp-8); } .desk > .dock { order: -1; background: none; border: 0; border-radius: 0; } .desk .stage { border-radius: var(--r-lg); } } /\* the hero with no animation (experiments.js hero arm \`none\`, 2026-09-26): the stage is not drawn and its module never loads (the script at the foot), so the desk is the "native in" rail alone. Loose, the rail wears the phone's treatment at every width: no box, no stage edge, marks only. The stage stays in the DOM (display none) so hero.css's :has(.arena) layout for the headline and the copy column holds. \*/ \[data-hero="none"\] #stage { display: none; } \[data-hero="none"\] .desk > .dock { background: none; border: 0; border-radius: 0; } @media (min-width: 561px) { \[data-hero="none"\] .desk > .dock { justify-content: safe center; } } /\* a phone on its side: hero.css's copy | desk columns would park the rail alone in the right half, so the hero stays one column \*/ @media (orientation: landscape) and (max-height: 500px) { \[data-hero="none"\] .hero { grid-template-columns: minmax(0, 1fr); } } /\* with no stage the hero ends at the rail, and the download band's 100svh centring left a hairline over \~200px of black on a laptop screen; the band takes its phone spacing so "get superbot" follows the rail \*/ \[data-hero="none"\] .dl-hero { min-height: auto; padding-top: var(--sp-12); padding-bottom: var(--sp-12); } /\* a drawn caption arm waits for its copy instead of flashing the control headline (the pre-paint script in [skip to content](https://superbot.gg/#main) [![](https://superbot.gg/site/assets/brand/mark-duo-sm.svg)superbot.gg](https://superbot.gg/) # the agent to manage your agents. a free app to manage your AI apps. [Get early access](https://superbot.gg/?cta%5Fid=hero%5Fcta#join) superbot synced ## get superbot one app for all your agents. for free. [Get early access](https://superbot.gg/?cta%5Fid=download%5Fband%5Fcta#join) - [macOS](https://superbot.gg/?cta%5Fid=chip%5Fmac#join) - [every installer](https://superbot.gg/?cta%5Fid=chip%5Fall#join)