/* Home "Works with the tools you know": Orbit (owner 2026-11-02; js/orbit.js). Four rings of logo tiles rise behind the
   "Does Page Lemon work with" box like a half sun. The box and answer cards are css/home.css (.fnd-*). */

.orb { --tile: 52px; padding-bottom: 72px; overflow: hidden; overflow: clip; }
.orb .ideas-head { margin-inline: auto; text-align: center; }

/* The tile: every logo on the same white round tile (hairline edge, soft blue-grey shadow). A logo whose brand colour is too
   light for white sits on that colour in black, the way the brands draw their own app icons. A tool with no clean logo
   gets one letter in the brand face. */
.orb-tile { display: grid; place-items: center; flex: none; width: var(--tile); height: var(--tile); border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(30, 29, 25, .07), 0 1px 1px rgba(30, 29, 25, .05), 0 12px 22px -14px rgba(27, 42, 158, .34); transition: box-shadow 200ms ease; }
.orb-tile img { display: block; width: 50%; height: 50%; }
.orb-tile.mono span { color: var(--brand); font: 600 calc(var(--tile) * .38)/1 var(--body); letter-spacing: -.02em; }
.orb-tile[data-logo="mailchimp"] { --lt: #FFE01B; } .orb-tile[data-logo="paddle"] { --lt: #FDDD35; } .orb-tile[data-logo="lemonsqueezy"] { --lt: #FFC233; }
.orb-tile[data-logo="intercom"] { --lt: #6AFDEF; } .orb-tile[data-logo="trae"] { --lt: #32F08C; } .orb-tile[data-logo="gumroad"] { --lt: #FF90E8; } .orb-tile[data-logo="godaddy"] { --lt: #1BDBDB; }
.orb-tile:is([data-logo="mailchimp"], [data-logo="paddle"], [data-logo="lemonsqueezy"], [data-logo="intercom"], [data-logo="trae"], [data-logo="gumroad"], [data-logo="godaddy"]) { background: var(--lt); }
.orb-tile:is([data-logo="mailchimp"], [data-logo="paddle"], [data-logo="lemonsqueezy"], [data-logo="intercom"], [data-logo="trae"], [data-logo="gumroad"], [data-logo="godaddy"]) img { filter: brightness(0); opacity: .88; }

.orb-it { display: block; margin: 0; padding: 0; border: 0; background: none; color: var(--ink); font: 600 var(--fs-xs)/1.25 var(--body); text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.orb-it:focus-visible { outline: none; }
.orb-it:hover .orb-tile { box-shadow: 0 0 0 1px rgba(27, 42, 158, .22), 0 1px 1px rgba(30, 29, 25, .05), 0 16px 26px -14px rgba(27, 42, 158, .5); }
.orb-it:focus-visible .orb-tile { box-shadow: 0 0 0 2px var(--page), 0 0 0 4px var(--primary), 0 16px 26px -14px rgba(27, 42, 158, .5); }

/* The stage: items placed by transform from the script; the rings' centre is the box's line. */
.orb-stage { position: relative; }
.orb-stage:not(.is-grid) { margin-top: 28px; overflow: hidden; overflow: clip; }
.orb-stage:not(.is-grid)::before { content: ""; position: absolute; left: 50%; bottom: 0; width: min(900px, 120%); height: 70%; transform: translateX(-50%); background: radial-gradient(ellipse at 50% 100%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 70%); pointer-events: none; }
.orb-stage:not(.is-grid) > .orb-it { position: absolute; top: 0; left: 0; will-change: transform, opacity; }
.orb-stage:not(.is-grid) .orb-nm { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.orb-it.is-down { pointer-events: none; }
.orb-it:focus-visible { opacity: 1 !important; }
.orb-ring { position: absolute; border: 1px solid rgba(27, 42, 158, .13); border-radius: 50%; pointer-events: none; }
.orb-stage:not(.is-grid) ~ .intg-below { position: relative; z-index: 2; margin-top: -30px; }
.orb .fnd-box { box-shadow: 0 18px 40px -22px rgba(27, 42, 158, .45); }
.orb .intg-below { margin-top: 20px; }
.orb .fnd-out:empty { min-height: 0; }
.orb .fnd-out:not(:empty) { margin-top: 14px; }

.orb-foot { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 18px; }
.orb-foot .intg-more { margin: 0; text-align: center; }
.orb-pause { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--brand); cursor: pointer; }
.orb-pause svg { width: 16px; height: 16px; fill: currentColor; }
.orb-pause .i-play, .orb-pause.is-paused .i-pause { display: none; }
.orb-pause.is-paused .i-play { display: inline; }
.orb-pause:hover { border-color: var(--brand); }
.orb-pause:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.orb-every { display: block; margin: 18px auto 0; padding: 10px 18px; min-height: 44px; border: 1px solid var(--brand); border-radius: 999px; background: var(--surface); color: var(--brand); font: 600 var(--fs-sm)/1 var(--body); cursor: pointer; }
.orb-every:hover { background: var(--brand); color: #fff; }
.orb-every:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Reduced motion: a still grid of cards, two rows, then every tool on "See every tool". */
.orb-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); list-style: none; }
.orb-grid .orb-it { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 100px; padding: 0 8px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px rgba(30, 29, 25, .06), 0 14px 26px -18px rgba(27, 42, 158, .4); }
.orb-grid .orb-tile { --tile: 40px; box-shadow: none; }
.orb-grid .orb-tile[data-logo] { background: var(--lt, none); border-radius: 12px; }
.orb-grid .orb-tile.mono { background: var(--sky); border-radius: 12px; }
.orb-grid .orb-tile img { width: 70%; height: 70%; }
.orb-grid .orb-nm { display: -webkit-box; max-width: 100%; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: break-word; }
.orb-grid .orb-it:hover { box-shadow: 0 0 0 1px rgba(27, 42, 158, .25), 0 16px 28px -16px rgba(27, 42, 158, .5); }
.orb-grid .orb-it:focus-visible { box-shadow: 0 0 0 2px var(--page), 0 0 0 4px var(--primary); }
.orb-grid:not(.all) li:nth-child(n+7) { display: none; }
@media (min-width: 480px) { .orb-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .orb-grid .orb-it { height: 112px; } .orb-grid:not(.all) li:nth-child(n+7) { display: block; } .orb-grid:not(.all) li:nth-child(n+9) { display: none; } }
@media (min-width: 700px) { .orb-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; } .orb-grid:not(.all) li:nth-child(n+9) { display: block; } .orb-grid:not(.all) li:nth-child(n+13) { display: none; } }
@media (min-width: 1000px) { .orb-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 14px; } .orb-grid:not(.all) li:nth-child(n+13) { display: block; } .orb-grid:not(.all) li:nth-child(n+17) { display: none; } }

/* The answer card: the same tile as the ring, the pill in the top-right corner, and the prompt in the house prompt box
   (css/home.css .hero-try: white or page-colour box, 2px brand edge, mono text, blue Copy as the one blue action). */
.orb .fnd-card { position: relative; }
.orb .fnd-h { gap: 14px; padding-right: 96px; min-height: 48px; }
.orb .fnd-h .orb-tile { --tile: 48px; box-shadow: 0 0 0 1px rgba(30, 29, 25, .1); }
.orb .fnd-h h3 { margin: 0; overflow-wrap: anywhere; }
.orb .fnd-card > .fnd-badge { position: absolute; top: 14px; right: 14px; }
.orb .fnd-prompt { padding: 12px 12px 12px 16px; background: var(--page); border: 2px solid var(--line-strong); border-radius: 12px; box-shadow: 3px 3px 0 var(--line-strong); }
.orb .fnd-plabel { margin: 0 0 8px; font: 600 var(--fs-ui)/1.3 var(--body); letter-spacing: 0; text-transform: none; color: var(--ink); }
.orb .fnd-prow { align-items: center; flex-wrap: wrap; gap: 10px 12px; }
.orb .fnd-prow code { flex: 1 1 200px; font: 500 var(--fs-sm)/1.45 var(--mono); color: var(--ink); background: none; border: 0; padding: 0; }
.orb .fnd-copy { min-width: 84px; min-height: 44px; padding: 8px 14px; border: 0; border-radius: 8px; background: var(--cta); color: var(--on-cta); font: 600 15px/1 var(--body); }
.orb .fnd-copy:hover { background: var(--cta-hover); }
.orb .fnd-copy:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
@media (max-width: 420px) { .orb .fnd-h { padding-right: 0; padding-top: 30px; } .orb .fnd-card { padding-top: 14px; } .orb .fnd-h .orb-tile { --tile: 44px; } }