/* Isolated to the result section on Landing Page and Website Creation. */
.sd-result-grid { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: clamp(24px, 3vw, 48px); }
.sd-result-copy { width: 100%; max-width: 44rem; text-align: center; }
.sd-result-copy .sd-copy { margin-top: 32px; }
.sd-result-copy .sd-copy p { text-wrap: balance; }
.sd-orbit { --orbit-duration: 36s; --orbit-play: paused; width: 100%; max-width: 520px; justify-self: center; }
.sd-orbit, .sd-orbit * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.sd-orbit[data-running="true"] { --orbit-play: running; }
.sd-orbit-field { position: relative; width: 100%; aspect-ratio: 1; container-type: inline-size; overflow: clip; }
.sd-orbit-center { position: absolute; inset: 36%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; border: 1px solid var(--sd-rule); border-radius: 50%; background: #1c1c1f; color: var(--ink); text-align: center; font: 400 clamp(12px, 3.5cqw, 18px)/1.25 "Inter", sans-serif; letter-spacing: -.025em; }
.sd-orbit-center svg { width: 25%; height: auto; color: var(--sd-muted); }
.sd .sd-orbit-track { position: absolute; inset: 15%; margin: 0; padding: 0; list-style: none; border: 1px solid var(--sd-rule); border-radius: 50%; pointer-events: none; }
.sd-orbit-spoke { position: absolute; inset: -1px; pointer-events: none; transform: rotate(var(--orbit-angle)); animation: sd-orbit-turn var(--orbit-duration) linear infinite; animation-play-state: var(--orbit-play); }
.sd-orbit-position { position: absolute; top: 50%; left: 100%; width: clamp(76px, 22cqw, 108px); transform: translate(-50%, -50%); }
.sd-orbit-badge { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(8px, 2cqw, 12px); min-height: clamp(64px, 18cqw, 88px); padding: 10px 4px; border: 1px solid var(--sd-rule); border-radius: 14px; background: #171719; color: var(--ink); font: 400 clamp(10px, 2.7cqw, 14px)/1.2 "Inter", sans-serif; letter-spacing: -.025em; white-space: nowrap; pointer-events: auto; transform: rotate(calc(-1 * var(--orbit-angle))); animation: sd-orbit-upright var(--orbit-duration) linear infinite; animation-play-state: var(--orbit-play); transition: border-color 160ms ease, background-color 160ms ease; }
.sd-orbit-badge svg { width: clamp(18px, 5cqw, 25px); height: auto; color: #c6c7cd; }
@media (hover: hover) and (pointer: fine) {
  .sd-orbit-badge:hover { border-color: var(--sd-muted); background-color: #2b2b30; }
}
@keyframes sd-orbit-turn { to { transform: rotate(calc(var(--orbit-angle) + 360deg)); } }
@keyframes sd-orbit-upright { to { transform: rotate(calc(-1 * var(--orbit-angle) - 360deg)); } }
@media (max-width: 900px) {
  .sd-orbit { max-width: 460px; }
}
@media (prefers-reduced-motion: reduce) {
  .sd-orbit-spoke, .sd-orbit-badge { animation: none; }
  .sd-orbit-badge { transition: none; }
}