/* GeoFix Live Translate (/translate, /en/translate) — componenti della sola pagina, caricati dopo
   geofix.css e page-hero.css.

   Nessuna regola su `a` nudi (la regola condivisa dei link resta in geofix.css) e nessuna modifica a
   .container, .hero, .page-hero o al design system: qui ci sono solo la gerarchia editoriale e le
   illustrazioni HTML/SVG della pagina, che sono rappresentative e non imitano schermate dell'app.
   Le microanimazioni (onda sonora, punto «in ascolto», comparsa della traduzione) sono decorative e
   si spengono del tutto con prefers-reduced-motion. */

/* Hero: testo e illustrazione affiancati da 901 px. */
.lt-hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px;align-items:center}
.translate-hero .microcopy{margin-top:14px}

/* Tre ancore verso le sezioni, non una seconda navigazione. */
.lt-pillars{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.lt-pillars a:where(:link,:visited){display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--muted);font-size:14px;font-weight:780;text-decoration:none}
.lt-pillars a:where(:link,:visited):where(:hover,:focus-visible){color:var(--text);border-color:rgba(20,184,166,.5)}
.lt-pillars a:focus-visible{outline:2px solid var(--teal);outline-offset:3px}

/* Capitoli: ruolo, frase portante, testo; illustrazione accanto, alternata su desktop. */
.lt-role{margin:0 0 14px;color:var(--teal);font-size:14px;font-weight:850;letter-spacing:.14em;text-transform:uppercase}
.lt-statement{margin:0 0 20px;font-size:clamp(34px,4.6vw,54px);line-height:1.04;letter-spacing:-.05em;font-weight:850;max-width:18ch}
.lt-lead{margin:0 0 26px;max-width:640px;color:var(--muted);font-size:clamp(17px,1.6vw,20px);line-height:1.55}
.lt-copy .list{max-width:640px}
.lt-split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;align-items:center}
@media(min-width:901px){.lt-split-reverse{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}.lt-split-reverse>.lt-visual{order:-1}}

/* Momenti d'uso. */
.lt-moment-kicker{margin:0 0 10px;color:var(--teal);font-size:13px;font-weight:850;letter-spacing:.12em;text-transform:uppercase}
.lt-moment h3{font-size:22px;line-height:1.2}

/* ---- Illustrazioni ------------------------------------------------------------------------------ */
.lt-visual{position:relative;margin:0;justify-self:center;width:100%;max-width:440px}
/* Il bagliore resta dentro la larghezza della figura: niente scorrimento orizzontale su mobile. */
.lt-visual::before{content:"";position:absolute;inset:-12% 0;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,rgba(20,184,166,.20),transparent);filter:blur(6px)}
.lt-panel,.lt-flow,.lt-listen{position:relative;padding:24px;border-radius:28px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.03));box-shadow:0 30px 80px rgba(0,0,0,.42)}
.lt-panel-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.lt-panel-title,.lt-flow-title{margin:0 0 14px;color:var(--teal);font-size:13px;font-weight:850;letter-spacing:.12em;text-transform:uppercase}

.lt-live{display:inline-flex;align-items:center;gap:8px;color:#c8fff7;font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.lt-live-dot{width:9px;height:9px;border-radius:999px;background:var(--teal);box-shadow:0 0 0 0 rgba(20,184,166,.6);animation:lt-pulse 2.2s ease-out infinite}
.lt-pair{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;border:1px solid rgba(20,184,166,.3);background:rgba(20,184,166,.12);color:var(--text);font-size:13px;font-weight:760}
.lt-pair-arrow{color:var(--teal)}
.lt-mode{display:inline-flex;padding:6px 12px;border-radius:999px;border:1px solid rgba(245,158,11,.35);background:rgba(245,158,11,.1);color:#fde7b0;font-size:12.5px;font-weight:760}

/* Onda sonora: barre statiche di altezza diversa; con il movimento consentito oscillano piano. */
.lt-wave{display:flex;align-items:center;gap:5px;height:40px;margin:14px 0 16px}
.lt-wave span{display:block;width:4px;height:100%;border-radius:2px;background:linear-gradient(180deg,#5eead4,var(--teal));transform:scaleY(.35);transform-origin:center;animation:lt-wave 1.6s ease-in-out infinite alternate}
.lt-wave span:nth-child(3n+1){transform:scaleY(.55);animation-delay:-.4s}
.lt-wave span:nth-child(3n+2){transform:scaleY(.85);animation-delay:-.9s}
.lt-wave span:nth-child(4n){transform:scaleY(.45);animation-delay:-1.3s}
.lt-wave span:nth-child(5n){transform:scaleY(.7);animation-delay:-.2s}
.lt-wave-soft{justify-content:center;height:32px}

.lt-bubble{margin:0 0 10px;padding:12px 16px;border-radius:18px;font-size:16px;line-height:1.45}
.lt-bubble-source{border:1px solid var(--line);border-bottom-left-radius:6px;background:rgba(255,255,255,.05);color:var(--muted)}
.lt-bubble-target{margin-left:18px;border:1px solid rgba(20,184,166,.35);border-bottom-right-radius:6px;background:rgba(20,184,166,.16);color:var(--text);font-weight:650}
.lt-visual-hero .lt-bubble-target{animation:lt-rise .9s ease-out .4s both}

.lt-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.lt-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--muted);font-size:13px;font-weight:700}
.lt-badge svg,.lt-flow-foot svg{color:var(--teal);flex:none}

/* Offline: le tre fasi dentro un unico riquadro «sul tuo iPhone». */
.lt-steps{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.lt-steps li{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.045);font-weight:700}
.lt-step-index{display:grid;place-items:center;width:28px;height:28px;min-width:28px;border-radius:999px;background:var(--teal);color:#031111;font-size:14px;font-weight:900}
.lt-flow-foot{display:flex;align-items:center;gap:8px;margin:16px 0 0;color:#c8fff7;font-size:14px;font-weight:700}

/* Voce: cuffie, onda e testo che resta. */
.lt-listen{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:left}
.lt-headphones{color:var(--teal)}
.lt-listen .lt-bubble-target{margin:6px 0 0;align-self:stretch}

/* Due direzioni: la scheda per l'interlocutore è chiara e ad alto contrasto, come nell'app. */
.lt-interlocutor{margin-top:6px;padding:18px 20px;border-radius:20px;background:#f3fbfb;color:#031111}
.lt-interlocutor-label{margin:0 0 6px;color:#0b6b62;font-size:12px;font-weight:850;letter-spacing:.1em;text-transform:uppercase}
.lt-interlocutor-text{margin:0;font-size:clamp(22px,2.4vw,28px);font-weight:820;line-height:1.2;letter-spacing:-.02em}

/* Conversazione: interventi con la loro coppia di lingue. */
.lt-turns{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.lt-turns li{padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.045);color:var(--text)}
.lt-turn-pair{display:block;margin-bottom:4px;color:var(--teal);font-size:11.5px;font-weight:850;letter-spacing:.08em}
.lt-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.lt-action{display:inline-flex;padding:8px 12px;border-radius:999px;border:1px solid var(--line);color:var(--muted);font-size:13px;font-weight:700}

/* Premium e requisiti. */
.lt-premium{border-color:rgba(20,184,166,.28);background:linear-gradient(135deg,rgba(20,184,166,.12),rgba(255,255,255,.03))}
#premium .card h2{font-size:clamp(26px,3vw,34px)}
#premium .card .list{margin-top:6px}

@keyframes lt-wave{from{transform:scaleY(.25)}to{transform:scaleY(1)}}
@keyframes lt-pulse{0%{box-shadow:0 0 0 0 rgba(20,184,166,.55)}70%{box-shadow:0 0 0 10px rgba(20,184,166,0)}100%{box-shadow:0 0 0 0 rgba(20,184,166,0)}}
@keyframes lt-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

@media(prefers-reduced-motion:reduce){
    .lt-wave span,.lt-live-dot,.lt-visual-hero .lt-bubble-target{animation:none}
}

@media(max-width:900px){
    .lt-hero-grid,.lt-split{grid-template-columns:1fr;gap:36px}
    .lt-visual{max-width:460px}
    .lt-statement{max-width:none}
}
@media(max-width:560px){
    .lt-panel,.lt-flow,.lt-listen{padding:18px;border-radius:22px}
    .lt-bubble{font-size:15px}
    .lt-bubble-target{margin-left:10px}
}