/*
 * Il tasto mensile/annuale, segmentato (consegna del 03/10/2026, `.hv-paga`).
 *
 * Una pillola sulla superficie tenue, col filo attorno e due voci larghe uguali;
 * il fondo viola della scelta scivola da una parte all'altra. Lo sconto sta in
 * una pastiglia accanto alla voce. I colori sono i token del tema (--hv-*), con
 * i token del sito come ripiego.
 *
 * Lo Shadow DOM non eredita i default del browser: la radice rifà box-sizing e
 * il reset dei bottoni.
 */
.PAlCSNGUX1hxBJMsxg5x {
  box-sizing: border-box;
  position: relative;
  isolation: isolate;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  padding: 4px;
  background: var(--hv-surface-2, var(--hu-color-secondary));
  border: 1px solid var(--hv-line-2, var(--hu-color-border-default));
  border-radius: 100px;
  font-family: var(--hu-font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.PAlCSNGUX1hxBJMsxg5x *,
.PAlCSNGUX1hxBJMsxg5x *::before,
.PAlCSNGUX1hxBJMsxg5x *::after { box-sizing: border-box; }
.PAlCSNGUX1hxBJMsxg5x :where(button) { font: inherit; cursor: pointer; background: none; border: none; margin: 0; color: inherit; }
.PAlCSNGUX1hxBJMsxg5x :focus-visible { outline: 2px solid var(--hv-accent-text, var(--hu-color-primary)); outline-offset: 3px; }

/* il fondo della scelta scivola da una parte all'altra */
.PAlCSNGUX1hxBJMsxg5x::before {
  content: ""; position: absolute; z-index: -1; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 100px;
  background: var(--hv-accent, var(--hu-color-primary)); box-shadow: inset 0 1px 0 #ffffff38;
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
.PAlCSNGUX1hxBJMsxg5x[data-billing="anno"]::before { transform: translateX(100%); }

.F7bA_KLodne2FeuLEFyy {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 132px; height: 44px; padding: 0 18px;
  border-radius: 100px;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--hv-fg-2, var(--hu-color-text-muted));
  transition: color 0.26s;
}
.F7bA_KLodne2FeuLEFyy:hover { color: var(--hv-fg, var(--hu-color-foreground)); }
.oO_GOD1i9xXtpJwZs7pR,
.oO_GOD1i9xXtpJwZs7pR:hover { color: var(--hv-accent-fg, #ffffff); }

/* lo sconto: una pastiglia accanto alla voce */
.QcnPAC8OnaCXDAtH6hyg {
  padding: 2px 8px; border-radius: 100px;
  background: var(--hv-accent-soft-2, var(--hu-color-accent-soft)); color: var(--hv-accent-text, var(--hu-color-primary));
  font-style: normal; font-size: 12px; font-variant-numeric: tabular-nums;
  transition: background-color 0.26s, color 0.26s;
}
.oO_GOD1i9xXtpJwZs7pR .QcnPAC8OnaCXDAtH6hyg { background: #ffffff2e; color: inherit; }

/* sul telefono la pillola prende tutta la larghezza */
@media (max-width: 767px) {
  .PAlCSNGUX1hxBJMsxg5x { display: grid; width: 100%; }
  .F7bA_KLodne2FeuLEFyy { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .PAlCSNGUX1hxBJMsxg5x::before, .F7bA_KLodne2FeuLEFyy, .QcnPAC8OnaCXDAtH6hyg { transition: none; }
}