/* Homepage: solo gli stati che la tavola non mostra (hover, focus, avvisi). Le misure vengono da board/site.css (importato da site.css). */
.pg-home a, .pg-home button { cursor: pointer; }
.pg-home a:focus-visible, .pg-home button:focus-visible { outline: 3px solid var(--ttm-cacao); outline-offset: 2px; }
.pg-home .s-0a02c08:hover, .pg-home .s-cf4e3cc:hover, .pg-home .s-61bc38d:hover, .pg-home .s-2dc55e8:hover { background: var(--ttm-pomodoro-hover) !important; }
.pg-home .s-0a02c08:active, .pg-home .s-cf4e3cc:active, .pg-home .s-61bc38d:active, .pg-home .s-2dc55e8:active { background: var(--ttm-pomodoro-press) !important; }
.pg-home .s-52bb1e5:hover, .pg-home .s-de44e76:hover, .pg-home .s-2f0df2c:hover, .pg-home .s-3d0cb2d:hover { color: var(--ttm-menu-a) !important; }
.pg-home .s-390ffbe { background: none; border: 0; text-align: left; }

/* avvisi (flash) */
.toast-container { position: fixed; top: 96px; right: 16px; z-index: 600; display: flex; flex-direction: column; gap: 12px; }
.toast { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: var(--ttm-bianco); color: var(--ttm-cacao); border-radius: var(--ttm-r-m); box-shadow: var(--ttm-ombra-pop); min-width: 280px; max-width: 400px; font: 600 15px/1.4 var(--ttm-testo); }
.toast.success { background: var(--ttm-amico); color: var(--ttm-amico-t); }
.toast.error { background: var(--ttm-errore-bg); color: var(--ttm-errore-testo); }
.toast-message { flex: 1; }
.toast-close { background: none; border: 0; color: inherit; font-size: 20px; line-height: 1; cursor: pointer; min-width: 32px; min-height: 32px; }
.toast.removing { opacity: 0; transition: opacity .25s ease; }

/* Hero: piu' aria tra il testo e il bordo del riquadro semi-trasparente (visibile da 901px in su; sotto non c'e' riquadro).
   Il riquadro cresce verso l'esterno (margine negativo a sinistra) cosi' il testo resta allineato al resto della pagina. */
@media (min-width: 901px) {
  .pg-home .ttm-hero-copy { padding: clamp(24px, 3vw, 44px) !important; margin-left: calc(-1 * clamp(24px, 3vw, 44px)) !important; }
}

/* Fatturazione mensile / annuale: l'indicatore bianco scorre sotto il bottone scelto (index.php crea .lp-thumb) */
.pg-home .lp-js { position: relative; }
.pg-home .lp-js .lp-thumb { position: absolute; top: 5px; bottom: 5px; left: 5px; width: 0; border-radius: 999px; background: #FFFFFF;
  box-shadow: 0 6px 14px -8px rgba(110,50,20,0.4); transition: transform .32s cubic-bezier(.4,0,.2,1), width .32s cubic-bezier(.4,0,.2,1); pointer-events: none; }
.pg-home .lp-js > button { position: relative; z-index: 1; background: transparent !important; box-shadow: none !important;
  padding: 11px 22px !important; font-weight: 700 !important; transition: color .25s ease; }
@media (prefers-reduced-motion: reduce) { .pg-home .lp-js .lp-thumb, .pg-home .lp-js > button { transition: none; } }