/* Hopcharge v5: final polish – balanced orbital background + grey benefits card. */
body { isolation:isolate; overflow-x:clip; }
.site-header, main, .site-footer, footer { position:relative; z-index:1; }

.hc-background-movement {
  position:absolute;
  inset:0 0 auto;
  height:1500px;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}

.hc-orbit-track {
  position:absolute;
  width:var(--diameter);
  height:var(--diameter);
  border:1.5px solid rgba(28, 40, 83, 0.075);
  border-radius:50%;
}

/* Symmetric orbit placement, tuned to feel closer to the homepage layout. */
.hc-orbit-track--left {
  --diameter:1060px;
  left:-900px;
  top:-350px;
}
.hc-orbit-track--right-outer {
  --diameter:1260px;
  right:-980px;
  top:-130px;
}
.hc-orbit-track--right-inner {
  --diameter:900px;
  right:-800px;
  top:220px;
}

.hc-orbit-runner {
  position:absolute;
  inset:0;
  border-radius:50%;
  transform:rotate(var(--start-angle));
  animation:hc-track-orbit var(--orbit-duration) linear infinite;
  transform-origin:center;
}
.hc-orbit-runner--left {
  --start-angle:248deg;
  --orbit-duration:42s;
  --vehicle-tilt:88deg;
}
.hc-orbit-runner--right-outer {
  --start-angle:36deg;
  --orbit-duration:54s;
  --vehicle-tilt:-92deg;
  animation-direction:reverse;
}
.hc-orbit-runner--right-inner {
  --start-angle:126deg;
  --orbit-duration:46s;
  --vehicle-tilt:88deg;
}
@keyframes hc-track-orbit {
  from { transform:rotate(var(--start-angle)); }
  to   { transform:rotate(calc(var(--start-angle) + 360deg)); }
}

.hc-orbit-vehicle {
  position:absolute;
  width:88px;
  height:88px;
  top:-44px;
  left:50%;
  transform:translateX(-50%) rotate(var(--vehicle-tilt));
  border-radius:50%;
  display:grid;
  place-items:center;
  background:radial-gradient(circle, rgba(230,239,250,.62) 0%, rgba(240,246,251,.16) 67%, transparent 78%);
}
.hc-orbit-vehicle img {
  display:block;
  width:68px;
  height:68px;
  object-fit:contain;
}

.subscription-main { padding-top:22px; }
.subscription-main--v5 { position:relative; z-index:1; }

/* Benefits return to a soft grey card, while the section stays on the page background. */
.benefits-fullwidth {
  width:100%;
  margin:0;
  padding:28px 0 38px;
  border:0;
  border-radius:0;
  box-shadow:none;
  background:transparent;
}
.benefits-fullwidth .shared-benefits { padding:0; }
.benefits-fullwidth .shared-benefits-note { margin:11px 0 0; }
.benefits-fullwidth .shared-benefits-card {
  max-width:980px;
  margin:20px auto 0;
  padding:22px 28px;
  background:#eef3fb;
  box-shadow:none;
  border:0;
  border-radius:26px;
  display:grid;
  gap:0;
}
.benefits-fullwidth .shared-benefit {
  gap:18px;
  align-items:flex-start;
  min-height:auto;
  padding:2px 0;
}
.benefits-fullwidth .shared-benefit + .shared-benefit { margin-top:8px; }
.benefits-fullwidth .shared-benefit p {
  margin:0;
  line-height:1.2;
}
.benefits-fullwidth .shared-benefit-sub {
  margin-top:0 !important;
  line-height:1.1;
}
.benefits-fullwidth .shared-benefit-icon {
  width:40px;
  height:40px;
}

@media (max-width: 1024px) {
  .hc-background-movement { height:1280px; }
  .hc-orbit-track--left { --diameter:900px; left:-790px; top:-315px; }
  .hc-orbit-track--right-outer { --diameter:1080px; right:-875px; top:-95px; }
  .hc-orbit-track--right-inner { --diameter:760px; right:-700px; top:255px; }
}

@media (max-width: 760px) {
  .hc-background-movement { height:980px; opacity:.58; }
  .hc-orbit-track--left { --diameter:620px; left:-530px; top:-250px; }
  .hc-orbit-track--right-outer { --diameter:720px; right:-610px; top:80px; }
  .hc-orbit-track--right-inner { --diameter:520px; right:-470px; top:360px; }
  .hc-orbit-vehicle { width:58px; height:58px; top:-29px; }
  .hc-orbit-vehicle img { width:47px; height:47px; }
  .benefits-fullwidth { padding:20px 0 28px; }
  .benefits-fullwidth .shared-benefits-card {
    max-width:none;
    margin:16px 10px 0;
    padding:14px 16px;
    border-radius:20px;
  }
  .benefits-fullwidth .shared-benefit { gap:12px; }
  .benefits-fullwidth .shared-benefit + .shared-benefit { margin-top:6px; }
  .benefits-fullwidth .shared-benefit p { font-size:13px; }
  .benefits-fullwidth .shared-benefit-sub { font-size:12px; }
}

@media (prefers-reduced-motion: reduce) {
  .hc-orbit-runner { animation:none !important; }
}