/* Sign-up page: hero, then one slideshow of advantages per plan */

.signup-hero {
  background: linear-gradient(135deg, #005179 0%, #0a7fb0 60%, #1BB3E9 100%);
  color: #fff;
  text-align: center;
  /* the fixed site header is 5rem high, and its menu wraps below it in French: the gradient starts at 8rem, as #body
     does (a white border, not a margin: a margin would collapse through the page wrapper and move the header too) */
  border-top: 8rem solid #fff;
  padding: 3.5rem 1.5rem;
}
/* #body keeps 8rem on top to clear the fixed header; after the hero it does not need it */
.signup-hero ~ #body {
  padding-top: 0;
}
.signup-hero h1 {
  color: #fff;
  font-size: 2.6rem;
  margin: 0 0 1rem;
}
.signup-hero-intro {
  font-size: 1.25rem;
  max-width: 46rem;
  margin: 0 auto 2rem;
  opacity: .95;
}
.signup-hero-note {
  font-size: .9rem;
  margin: 1.2rem auto 0;
  opacity: .8;
}

.signup-cta {
  display: inline-block;
  background: #fff;
  color: #005179;
  font-weight: 700;
  font-size: 1.1rem;
  padding: .9rem 2.2rem;
  border-radius: 2rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
  transition: transform .15s ease, box-shadow .15s ease;
}
.signup-cta:hover {
  color: #005179;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .22);
}

.signup-plan {
  padding: 3rem 0 1rem;
}
.signup-plan:first-child {
  padding-top: 3.5rem;
}
.signup-plan + .signup-plan {
  border-top: 1px solid #e6eef3;
}
.signup-plan-head {
  text-align: center;
  margin-bottom: 1.5rem;
}
.signup-plan-head h2 {
  margin: .6rem 0 .3rem;
  color: #005179;
}
.signup-plan-head p {
  color: #666;
  margin: 0;
}
.signup-plan-badge {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .8rem;
  font-weight: 700;
  color: #fff;
  background: #1BB3E9;
  padding: .3rem .9rem;
  border-radius: 1rem;
}
.signup-plan-support .signup-plan-badge { background: #005179; }
.signup-plan-partner .signup-plan-badge { background: #0a7fb0; }

/* slideshow: a horizontal scroll-snap track, driven by signup.js */
.signup-carousel {
  position: relative;
  max-width: 54rem;
  margin: 0 auto;
  padding: 0 3rem;
}
.signup-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.signup-track::-webkit-scrollbar { display: none; }
.signup-slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  box-sizing: border-box;
  text-align: center;
  padding: 2.2rem 2rem 2rem;
  background: #f5fafd;
  border-radius: 1rem;
}
.signup-slide-icon {
  width: 4.5rem;
  height: 4.5rem;
  line-height: 4.5rem;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: #1BB3E9;
  color: #fff;
  font-size: 2rem;
}
.signup-plan-support .signup-slide-icon { background: #005179; }
.signup-plan-partner .signup-slide-icon { background: #0a7fb0; }
.signup-slide h3 {
  margin: 0 0 .6rem;
  color: #005179;
}
.signup-slide p {
  margin: 0 auto;
  max-width: 36rem;
  color: #444;
}

.signup-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-70%);
  width: 2.4rem;
  height: 2.4rem;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #005179;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
  cursor: pointer;
}
.signup-nav:hover { background: #1BB3E9; color: #fff; }
.signup-prev { left: 0; }
.signup-next { right: 0; }

.signup-dots {
  text-align: center;
  margin-top: 1rem;
}
.signup-dots button {
  width: .65rem;
  height: .65rem;
  margin: 0 .25rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #c9dbe5;
  cursor: pointer;
}
.signup-dots button[aria-current="true"] { background: #1BB3E9; }

.signup-footer {
  text-align: center;
  padding: 2.5rem 0 1rem;
}
.signup-footer p {
  color: #666;
  margin-top: 1.2rem;
}

@media (max-width: 40rem) {
  .signup-hero h1 { font-size: 1.9rem; }
  .signup-carousel { padding: 0; }
  .signup-nav { display: none; }
  .signup-slide { padding: 1.8rem 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .signup-track { scroll-behavior: auto; }
}