/* The small three-circle artwork borrows Compare's visual language without copying its layout.
   Smart Planner evokes exploring possibilities; My Trip echoes a journey of linked stops.
   Pure CSS, so it adds no image requests or scripts. */
.planning-hero-with-art {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 270px;
    align-items: center;
    gap: clamp(24px, 4vw, 58px);
}
.planning-hero-with-art > .page-heading { position: relative; z-index: 1; min-width: 0; }
.planning-hero-orbit {
    position: relative;
    justify-self: end;
    width: 250px;
    height: 240px;
    pointer-events: none;
    isolation: isolate;
}
.planning-hero-orbit::before {
    content: "";
    position: absolute;
    inset: 16px;
    border: 1px solid rgb(var(--brand-green-rgb) / .26);
    border-radius: 50%;
    transform: rotate(-14deg) scaleY(.86);
}
.planning-hero-orbit__circle { position: absolute; display: block; border-radius: 50%; }

/* Planner: overlapping options, with sunny yellow as the leading accent. */
.planning-hero-orbit--planner .planning-hero-orbit__circle:nth-child(1) {
    width: 145px; height: 145px;
    left: 5px; top: 56px;
    background: var(--sun);
}
.planning-hero-orbit--planner .planning-hero-orbit__circle:nth-child(2) {
    width: 110px; height: 110px;
    top: 3px; right: 5px;
    background: var(--ocean);
}
.planning-hero-orbit--planner .planning-hero-orbit__circle:nth-child(3) {
    width: 91px; height: 91px;
    right: 24px; bottom: 7px;
    background: var(--green);
}

/* My Trip: a green anchor with blue and yellow stops along the journey. */
.planning-hero-orbit--trip::before {
    border-color: rgb(var(--brand-blue-rgb) / .24);
    transform: rotate(19deg) scaleY(.77);
}
.planning-hero-orbit--trip .planning-hero-orbit__circle:nth-child(1) {
    width: 145px; height: 145px;
    right: 11px; top: 39px;
    background: var(--green);
}
.planning-hero-orbit--trip .planning-hero-orbit__circle:nth-child(2) {
    width: 99px; height: 99px;
    left: 7px; top: 8px;
    background: var(--sun);
}
.planning-hero-orbit--trip .planning-hero-orbit__circle:nth-child(3) {
    width: 91px; height: 91px;
    left: 26px; bottom: 2px;
    background: var(--ocean);
}
@media (max-width: 1050px) {
    .planning-hero-with-art { grid-template-columns: minmax(0, 1fr) 190px; gap: 24px; }
    .planning-hero-orbit { width: 180px; height: 175px; transform: scale(.74); transform-origin: center right; }
}
@media (max-width: 720px) {
    .planning-hero-with-art { grid-template-columns: minmax(0, 1fr); }
    .planning-hero-orbit { display: none; }
}