/* Shared billing switch and trial reassurance on Home and /preise. */
.pricing-v2-billing-selector {
  display: grid;
  grid-template-columns: max-content 68px max-content;
  align-items: center;
  justify-content: center;
  column-gap: 18px;
  margin: 0 auto 60px;
}

.pricing-v2-billing-selector .pricing-v2-billing-label {
  appearance: none;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #65717a;
  min-height: 44px;
  padding: 8px 0;
  font: inherit;
  font-size: clamp(0.88rem, 1.3vw, 1rem);
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
}

.pricing-v2-billing-selector .pricing-v2-billing-label[aria-pressed="true"] {
  color: #263e50;
  font-weight: 850;
  text-decoration: underline;
  text-decoration-color: #f39200;
  text-decoration-thickness: 3px;
  text-underline-offset: 7px;
}

.pricing-v2-billing-annual {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pricing-v2-billing-selector .pricing-v2-billing-saving {
  color: #945600;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.45;
}

.pricing-v2-billing-selector .pricing-v2-billing-switch {
  appearance: none;
  position: relative;
  width: 68px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  padding: 0;
  background: transparent;
  cursor: pointer;
  touch-action: pan-y;
}

.pricing-v2-billing-switch::before {
  content: "";
  position: absolute;
  inset: 4px 0;
  border-radius: inherit;
  background: #304659;
  box-shadow: inset 0 1px 3px #0002;
  transition: background 180ms ease;
}

.pricing-v2-billing-switch::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 9px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px #0003;
  transition: transform 180ms ease;
}

.pricing-v2-billing-switch[aria-checked="true"]::before { background: #f39200; }
.pricing-v2-billing-switch[aria-checked="true"]::after { transform: translateX(32px); }
.pricing-v2-billing-selector button:focus-visible { outline: 3px solid #304659; outline-offset: 4px; }

/* Keep the decorative circle clipped without creating a nested scroll area. */
.pricing-v2-trial { overflow: clip; }

.pricing-v2-trial-actions {
  display: grid;
  gap: 14px;
  justify-items: center;
  max-width: 100%;
}

.pricing-v2-trial-actions .pricing-v2-trial-button { grid-column: auto; justify-self: stretch; }
.pricing-v2-trial .pricing-v2-trial-no-card {
  display: block;
  color: #fff !important;
  margin: 8px 0 0;
  font-size: 0.86rem;
  font-weight: 850;
  line-height: 1.48;
  text-align: left;
}

.pricing-v2 .pricing-v2-price-context {
  min-height: 20px;
  margin: -4px 0 14px;
  color: #64717c;
  font-size: 0.78rem;
  line-height: 1.4;
  text-align: center;
}
.pricing-v2 .pricing-v2-plan-card--featured .pricing-v2-price-context { color: #ffffffc7; }
[data-billing-context][hidden] { display: none !important; }

@media (max-width: 920px) {
  .pricing-v2-billing-annual { flex-direction: column; align-items: flex-start; gap: 1px; }
  .pricing-v2-billing-selector { align-items: start; }
  .pricing-v2-trial-actions { grid-column: 2; justify-self: start; }
}

@media (max-width: 760px) {
  .pricing-v2-trial-actions { grid-column: 1; justify-self: center; }
  .pricing-v2-billing-selector {
    grid-template-columns: minmax(0, 1fr) 68px minmax(0, 1fr);
    column-gap: clamp(8px, 2vw, 14px);
    margin-bottom: 54px;
  }
  .pricing-v2-billing-selector > .pricing-v2-billing-label { text-align: right; }
  .pricing-v2-billing-annual .pricing-v2-billing-label { text-align: left; }
  .pricing-v2-billing-selector .pricing-v2-billing-saving { font-size: 0.72rem; }
}

@media (prefers-reduced-motion: reduce) {
  .pricing-v2-billing-switch::before, .pricing-v2-billing-switch::after { transition: none; }
}