/*
  TED Monitor, presentazione. Colori e illustrazioni dell'app: verde petrolio, punto ambra,
  sfondi acquerellati. L'unico elemento audace è il radar dell'apertura; il resto è quieto.
*/
:root {
  --petrolio: #0f766e;
  --petrolio-scuro: #115e59;
  --petrolio-chiaro: #14b8a6;
  --abisso: #053f3b;
  --tenue: #e6f2f1;
  --bordo-tenue: #b9dcd8;
  --ambra: #f59e0b;
  --ink: #18181b;
  --muted: #52525b;
  --soft: #71717a;
  --line: #e4e4e7;
  --carta: #fafafa;
  --font: "Source Sans 3", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-family: var(--font);
  color-scheme: light;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html.story-guided { scroll-behavior: auto; }
body { margin: 0; background: var(--carta); color: var(--ink); overflow-x: hidden; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2 { font-weight: 650; letter-spacing: -0.035em; line-height: 1.02; text-wrap: balance; }
h1 { font-size: clamp(40px, 5.4vw, 84px); }
h2 { font-size: clamp(36px, 4.4vw, 68px); }
.soft { color: var(--soft); }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: default; opacity: .35; }
:where(button, a):focus-visible { outline: 3px solid var(--petrolio-chiaro); outline-offset: 3px; }
img { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 12px; left: 16px; z-index: 100; transform: translateY(-160%); background: #fff; color: var(--ink); padding: 12px 20px; font-weight: 700; border-radius: 8px; transition: transform .2s ease; }
.skip-link:focus { transform: none; }

/* Testata: il logo dell'app, che a fine apertura riceve il radar */
.masthead { position: fixed; inset: 0 0 auto; z-index: 40; height: 72px; padding: 0 clamp(16px, 4vw, 56px); display: flex; align-items: center; pointer-events: none; }
.brand { pointer-events: auto; display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px; background: rgba(255, 255, 255, .92); border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(5, 63, 59, .08); font-weight: 650; font-size: 15px; backdrop-filter: blur(10px); }
.brand-mark { display: grid; place-items: center; width: 32px; height: 32px; }
.brand-mark img { width: 32px; height: 32px; }

/* Capitoli */
.chapter { position: relative; min-height: 100vh; min-height: 100svh; }
.lead { margin-top: 20px; font-size: clamp(17px, 1.45vw, 21px); line-height: 1.5; color: var(--muted); max-width: 40ch; }
.button { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 999px; border: 0; font-weight: 650; font-size: 15px; transition: background .2s ease, transform .2s ease; }
.button.primary { background: var(--petrolio); color: #fff; box-shadow: 0 12px 28px -8px rgba(15, 118, 110, .55); }
.button.primary:hover { background: var(--petrolio-scuro); transform: translateY(-2px); }
.text-link { font-size: 14px; font-weight: 600; color: var(--muted); }
.text-link:hover { color: var(--petrolio); }

/* =========================================================================
   01 Il radar
   ========================================================================= */
.intro { height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; background: var(--carta) url("img/illustrazioni/login-sfondo.jpg") center / cover no-repeat; }
.intro-sky { position: absolute; inset: 0; background: radial-gradient(ellipse 60% 70% at 72% 50%, rgba(230, 242, 241, .9), transparent 70%); }
.radar-wrap { position: absolute; z-index: 2; right: -3vw; top: 50%; width: min(90vh, 60vw); aspect-ratio: 1; margin-top: calc(min(90vh, 60vw) / -2); will-change: transform; }
.radar-wrap::before { content: ""; position: absolute; inset: 1.5%; border-radius: 50%; box-shadow: 0 40px 70px -10px rgba(5, 63, 59, .35); }
.radar-core { position: absolute; inset: 0; }
.big-radar { position: relative; width: 100%; height: 100%; display: block; overflow: visible; }
.br-beam-layer { position: absolute; inset: 0; width: 100%; height: 100%; will-change: transform; pointer-events: none; }
.big-radar { will-change: transform; }
.blip-dot { position: absolute; width: 2.6%; aspect-ratio: 1; margin: -1.3% 0 0 -1.3%; border-radius: 50%; background: var(--ambra); opacity: .35; transform: scale(.85); }
.blip-dot::after { content: ""; position: absolute; inset: -10%; border-radius: 50%; border: 2px solid var(--ambra); opacity: 0; }
.blip-dot.is-hit { animation: blip-glow 2.6s ease-out both; }
.blip-dot.is-hit::after { animation: blip-ring 1.6s ease-out both; }
@keyframes blip-glow { 0% { opacity: 1; transform: scale(1.3); } 100% { opacity: .35; transform: scale(.85); } }
@keyframes blip-ring { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(4.5); } }
.blip-labels { position: absolute; inset: 0; pointer-events: none; }
.blip-label {
  position: absolute; display: grid; gap: 1px; width: max-content; max-width: 230px; padding: 8px 12px 9px; border-radius: 10px;
  background: rgba(255, 255, 255, .96); color: var(--ink); box-shadow: 0 14px 30px -10px rgba(5, 63, 59, .45);
  font-size: 12.5px; line-height: 1.3; opacity: 0; transform: translate(-50%, calc(-100% - 16px)) scale(.9); transform-origin: 50% 100%;
  transition: opacity .35s ease, transform .35s cubic-bezier(.2, .8, .3, 1.3);
}
.blip-label::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; margin-left: -6px; background: inherit; transform: rotate(45deg); border-radius: 2px; }
.blip-label b { font-size: 13px; }
.blip-label span { color: var(--muted); }
.blip-label em { font-style: normal; color: var(--petrolio); font-weight: 650; font-variant-numeric: tabular-nums; }
.blip-label.is-on { opacity: 1; transform: translate(-50%, calc(-100% - 16px)); }

.intro-floaters { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.intro.is-away .radar-wrap, .intro.is-away .intro-floaters { visibility: hidden; }
.floater { position: absolute; width: clamp(64px, 8vw, 128px); height: auto; }
.floater.f1 { left: 46%; top: 12%; }
.floater.f2 { left: 33%; top: 9%; width: clamp(56px, 6vw, 96px); }
.floater.f3 { left: 40%; bottom: 9%; width: clamp(54px, 6vw, 92px); }
.floater.f4 { right: 3%; top: 10%; width: clamp(60px, 7vw, 110px); }
.floater.f5 { right: 6%; bottom: 8%; width: clamp(56px, 6.5vw, 100px); }

.intro-copy { position: absolute; z-index: 4; left: clamp(16px, 6vw, 110px); top: 50%; transform: translateY(-46%); width: min(36rem, 40vw); }
.intro-copy h1 { font-size: clamp(40px, min(5vw, 8vh), 84px); }
.intro-lead { margin-top: 22px; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.55; color: var(--muted); max-width: 44ch; }
.intro-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 28px; }

/* =========================================================================
   Scene fissate: copia a sinistra, dispositivi a destra
   ========================================================================= */
.scene { background: var(--carta) url("img/illustrazioni/app-sfondo.jpg") center / cover no-repeat; }
.spread {
  min-height: 100vh; min-height: 100svh; display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.42fr);
  align-items: center; gap: clamp(28px, 4vw, 72px); padding: 110px clamp(16px, 5vw, 96px) 110px; max-width: 1600px; margin: 0 auto;
}
.copy h2 { font-size: clamp(34px, min(4vw, 7vh), 64px); }
.step-choices { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }
.step-choices button { padding: 9px 15px; border-radius: 999px; font-size: 14px; font-weight: 600; border: 1px solid var(--line); background: #fff; transition: background .2s ease, border-color .2s ease, color .2s ease; }
.step-choices button:hover { border-color: var(--petrolio); }
.step-choices button[aria-pressed="true"] { background: var(--petrolio); border-color: var(--petrolio); color: #fff; }
.step-caption { margin-top: 18px; min-height: 4.6em; font-size: 16px; line-height: 1.55; color: var(--ink); max-width: 46ch; padding-left: 14px; border-left: 3px solid var(--ambra); }

.stage { position: relative; width: 100%; padding: 0 9% 8% 0; }
.stage-ai { padding: 0; }
.proto-tag {
  position: absolute; z-index: 30; left: 50%; top: -30px; transform: translateX(-50%); padding: 3px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, .9); border: 1px solid var(--line); color: var(--muted); font-size: 12px; font-weight: 600;
}
.stage-ai .proto-tag { left: 50%; }

/* MacBook: schermo disegnato a 980×612 e scalato */
.macbook { width: 100%; }
.mb-screen { padding: 1.1% 1.1% 1.5%; background: #0b0d11; border: 1.5px solid #474d57; border-radius: 18px 18px 4px 4px; box-shadow: 0 40px 80px -24px rgba(5, 63, 59, .45); }
.mb-slot { position: relative; aspect-ratio: 980 / 612; overflow: hidden; border-radius: 4px; background: var(--carta); }
.mb-device { width: 980px; height: 612px; }
.mb-view { position: absolute; inset: 0; overflow: hidden; }
.mb-view > * { height: 100%; }
.mb-base { position: relative; height: 14px; margin: 0 -6%; background: linear-gradient(#e2e6eb, #9ba4ae); border-radius: 2px 2px 16px 16px; box-shadow: 0 18px 30px -10px rgba(0, 0, 0, .35); }
.mb-base::before { content: ""; position: absolute; left: 41%; right: 41%; top: 0; height: 5px; border-radius: 0 0 6px 6px; background: #b3bbc5; }

/* Dispositivi scalati */
.device-slot { position: relative; width: 100%; }
.device { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.device * { box-sizing: border-box; }

/* iPhone: disegnato a 320×660 */
.phone-dock { position: absolute; right: -2%; bottom: 0; width: 22%; z-index: 5; }
.phone-slot { aspect-ratio: 320 / 660; }
.iphone { width: 320px; height: 660px; }
.iphone-screen {
  position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; background: #fff;
  border: 7px solid #080b10; border-radius: 48px; box-shadow: 0 30px 60px rgba(5, 63, 59, .3), 0 0 0 1.5px #9eaeb9, 0 0 0 3px #52616d;
}
.ios-status { flex: 0 0 40px; display: flex; align-items: center; justify-content: space-between; padding: 6px 24px 0; background: #fff; color: #111; font-size: 12.5px; font-weight: 650; position: relative; transition: background .3s ease, color .3s ease; }
.ios-island { position: absolute; left: calc(50% - 34px); top: 9px; width: 68px; height: 21px; border-radius: 14px; background: #030507; }
.ios-icons { width: 44px; height: 10px; background: linear-gradient(90deg, currentColor 0 4px, transparent 4px 7px, currentColor 7px 11px, transparent 11px 14px, currentColor 14px 18px, transparent 18px 26px, currentColor 26px 44px); border-radius: 2px; opacity: .9; }
.ios-home { flex: 0 0 18px; display: grid; place-items: center; background: #fff; transition: background .3s ease; }
.ios-home i { width: 34%; height: 4px; border-radius: 4px; background: #111; }
.phone-view { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.phone-view > * { height: 100%; }
.iphone-screen.is-lock .ios-status, .iphone-screen.is-lock .ios-home { background: #0d4a45; color: #fff; }
.iphone-screen.is-lock .ios-home i { background: #fff; }
.iphone-screen.is-tg .ios-status { background: #fff; }

/* Cambio di schermata dentro un dispositivo */
.swap-in { animation: swap-in .45s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes swap-in { from { opacity: 0; transform: translateY(14px) scale(.985); } }

/* =========================================================================
   Posta: casella generica e mail di TED Monitor
   ========================================================================= */
.wm { display: flex; flex-direction: column; height: 100%; background: #f6f7f9; color: #1f2328; font-family: var(--font); font-size: 14px; }
.wm-top { flex: none; display: flex; align-items: center; gap: 18px; padding: 10px 18px; background: #fff; border-bottom: 1px solid #e3e6ea; }
.wm-logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; font-size: 17px; color: #334155; }
.wm-logo .icona { width: 22px; height: 22px; stroke-width: 1.75; color: #334155; }
.wm-cerca { flex: 1; max-width: 520px; display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 10px; background: #eef1f4; color: #6b7280; font-size: 13.5px; }
.wm-cerca .icona { width: 16px; height: 16px; }
.wm-avatar { margin-left: auto; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #334155; color: #fff; font-size: 12px; font-weight: 700; flex: none; overflow: hidden; }
.wm-avatar.tm { background: #fff; border: 1px solid #e3e6ea; margin: 0; }
.wm-avatar.tm img { width: 24px; height: 24px; }
.wm-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 150px 270px minmax(0, 1fr); }
.wm-cartelle { display: flex; flex-direction: column; gap: 2px; padding: 12px 10px; font-size: 13.5px; color: #4b5563; }
.wm-cartelle span { display: flex; justify-content: space-between; padding: 7px 12px; border-radius: 0 999px 999px 0; }
.wm-cartelle .is-on { background: #e1e7ee; color: #111827; font-weight: 650; }
.wm-scrivi { margin-bottom: 8px; border-radius: 14px !important; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); justify-content: flex-start !important; gap: 8px; font-weight: 600; color: #111827; padding: 11px 14px !important; }
.wm-scrivi .icona { width: 16px; height: 16px; }
.wm-elenco { background: #fff; border-left: 1px solid #e3e6ea; border-right: 1px solid #e3e6ea; overflow: hidden; }
.wm-elenco-testa { padding: 12px 16px; font-weight: 650; border-bottom: 1px solid #eef0f3; }
.wm-riga { display: grid; grid-template-columns: 1fr auto; gap: 1px 10px; padding: 11px 16px; border-bottom: 1px solid #eef0f3; font-size: 13px; color: #4b5563; }
.wm-riga.is-unread { color: #111827; }
.wm-riga.is-unread .wm-da, .wm-riga.is-unread .wm-oggetto { font-weight: 700; }
.wm-riga.is-unread::before { content: ""; position: absolute; }
.wm-da { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wm-ora { font-size: 12px; color: #6b7280; }
.wm-oggetto, .wm-anteprima { grid-column: 1 / -1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wm-anteprima { color: #6b7280; }
.wm-riga.is-new { position: relative; background: var(--tenue); box-shadow: inset 4px 0 0 var(--petrolio); animation: wm-arrivo .7s cubic-bezier(.2, .8, .3, 1.2) both; }
.wm-riga.is-selected { background: #d6ecea; }
@keyframes wm-arrivo { from { opacity: 0; transform: translateY(-100%); max-height: 0; } to { max-height: 120px; } }
.wm-lettura { min-width: 0; overflow: hidden; display: flex; flex-direction: column; background: #fff; }
.wm-lettura-testa { flex: none; padding: 16px 22px 12px; border-bottom: 1px solid #eef0f3; animation: swap-in .4s ease both; }
.wm-lettura-testa h2 { font-size: 18px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.wm-indietro { display: none; }
.wm-mittente { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 13px; color: #111827; }
.wm-mittente span { color: #6b7280; }
.wm-mittente .wm-ora { margin-left: auto; }
.wm-mail { flex: 1; min-height: 0; overflow: hidden; padding: 14px; background: #f4f4f5; animation: swap-in .5s ease .1s both; }
.wm-nessuna { flex: 1; display: grid; place-content: center; justify-items: center; gap: 8px; color: #9ca3af; font-size: 13px; }
.wm-nessuna .icona { width: 40px; height: 40px; stroke-width: 1.25; }

.ml-card { max-width: 600px; margin: 0 auto; background: #fff; border: 1px solid #e4e4e7; border-radius: 6px; font-family: "Segoe UI", Helvetica, Arial, sans-serif; color: #18181b; font-size: 14px; line-height: 1.45; }
.ml-head { display: flex; align-items: center; gap: 12px; padding: 16px 22px 12px; }
.ml-head img { width: 40px; height: 40px; }
.ml-head b { display: block; font-size: 17px; }
.ml-head span { font-size: 12px; color: #52525b; }
.ml-bar { height: 4px; background: #0f766e; }
.ml-intro { padding: 14px 22px 4px; }
.ml-intro h1 { font-size: 19px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
.ml-intro span { font-size: 12px; color: #52525b; }
.ml-intro p { margin-top: 8px; font-size: 15px; }
.ml-gara { padding: 14px 22px; border-top: 1px solid #e4e4e7; margin-top: 10px; }
.ml-num { font-family: Consolas, ui-monospace, monospace; font-size: 12px; color: #52525b; }
.ml-gara h2 { margin: 2px 0 4px; font-size: 16px; font-weight: 600; letter-spacing: -.005em; line-height: 1.3; color: #0f766e; text-decoration: underline; text-underline-offset: 2px; }
.ml-grigio, .ml-piccolo { color: #52525b; }
.ml-piccolo { font-size: 12.5px; }
.ml-ai { margin-top: 8px; padding: 8px 10px; background: #e6f2f1; border-radius: 4px; color: #115e59; font-size: 13px; }
.ml-ai p { margin-top: 3px; color: #18181b; }
.ml-ai ul { margin: 4px 0 0 16px; list-style: disc; color: #18181b; }
.ml-link { display: inline-block; margin-top: 8px; color: #0f766e; font-weight: 600; }
.ml-piede { padding: 12px 22px 16px; border-top: 1px solid #e4e4e7; font-size: 11.5px; color: #52525b; }
.ml-piede p + p { margin-top: 5px; }
.ml-piede b { color: #0f766e; }

/* Mail sul telefono e casella stretta: una cosa alla volta */
.phone-view .wm-top { padding: 8px 12px; gap: 8px; }
.phone-view .wm-cerca { font-size: 12px; padding: 6px 10px; }
.phone-view .wm-logo span, .phone-view .wm-logo { font-size: 15px; }
.phone-view .wm-body, .proto-app .wm-body { grid-template-columns: 1fr; }
.phone-view .wm-cartelle { display: none; }
.phone-view .wm-elenco { border: 0; }
.phone-view .wm-lettura { display: none; }
.phone-view .wm.is-reading .wm-elenco { display: none; }
.phone-view .wm.is-reading .wm-lettura { display: flex; }
.phone-view .wm-indietro { display: inline-flex; margin-bottom: 6px; color: #334155; }
.phone-view .wm-lettura-testa { padding: 10px 14px; }
.phone-view .wm-lettura-testa h2 { font-size: 15px; }
.phone-view .wm-mittente { font-size: 11.5px; }
.phone-view .wm-mail { padding: 8px; }
.phone-view .ml-card { font-size: 12.5px; }
.phone-view .ml-head { padding: 10px 12px 8px; }
.phone-view .ml-intro, .phone-view .ml-gara, .phone-view .ml-piede { padding-left: 12px; padding-right: 12px; }
.phone-view .ml-intro h1 { font-size: 16px; }
.phone-view .ml-gara h2 { font-size: 14px; }

/* =========================================================================
   Telegram e blocco schermo
   ========================================================================= */
.lk { position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 10px; color: #fff; background: radial-gradient(ellipse at 30% 10%, #1aa392 0%, #0d4a45 55%, #062f2c 100%); overflow: hidden; }
.lk::before { content: ""; position: absolute; right: -40%; bottom: -20%; width: 120%; aspect-ratio: 1; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .08); box-shadow: 0 0 0 40px rgba(255, 255, 255, .03), 0 0 0 80px rgba(255, 255, 255, .025); }
.lk-ora { display: grid; justify-items: center; margin: 14px 0 18px; }
.lk-ora span { font-size: 15px; font-weight: 600; opacity: .9; }
.lk-ora b { font-size: 78px; font-weight: 600; line-height: 1; letter-spacing: -.02em; }
.lk-banner, .os-banner {
  position: relative; z-index: 1; width: 100%; display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start;
  padding: 11px 12px; border-radius: 18px; background: rgba(245, 247, 248, .88); color: #111; backdrop-filter: blur(16px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25); font-size: 12.5px; line-height: 1.3; text-align: left;
  animation: banner-in .6s cubic-bezier(.2, .9, .3, 1.25) both;
}
.lk-banner b, .os-banner b { display: block; font-size: 13px; }
.lk-banner span:not(.lk-app):not(.lk-quando), .os-banner div span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: #333; }
.lk-quando { font-size: 11px; color: #666; }
.lk-app { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; }
.lk-app svg { width: 24px; height: 24px; }
.tg-icon { background: linear-gradient(#37aee2, #1e96c8); }
.mail-icon { background: linear-gradient(#5aa2f8, #1f6fe0); color: #fff; }
.mail-icon .icona { width: 20px; height: 20px; stroke-width: 2; }
.lk-mail { animation-delay: .05s; }
@keyframes banner-in { from { opacity: 0; transform: translateY(-26px) scale(.94); } }

.tg { display: flex; flex-direction: column; height: 100%; color: #000; font-family: -apple-system, "Segoe UI", Roboto, var(--font); font-size: 13px; }
.tg-top { flex: none; display: flex; align-items: center; gap: 9px; padding: 8px 12px; background: #fff; border-bottom: 1px solid #e6e6e6; }
.tg-top b { display: block; font-size: 14px; }
.tg-top span { font-size: 11.5px; color: #8a8a8a; }
.tg-back { color: #3390ec; display: inline-flex; }
.tg-back .icona { width: 20px; height: 20px; }
.tg-avatar { width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 1px solid #e6e6e6; display: grid; place-items: center; overflow: hidden; }
.tg-avatar img { width: 28px; height: 28px; }
.tg-chat { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 10px 10px 8px; background: #c9dcb5 linear-gradient(160deg, #d5e5b9 0%, #b5d3a8 50%, #9ec7a6 100%); }
.tg-day { align-self: center; padding: 2px 10px; border-radius: 999px; background: rgba(0, 0, 0, .18); color: #fff; font-size: 11.5px; font-weight: 600; }
.tg-msg { position: relative; align-self: flex-start; max-width: 94%; padding: 7px 10px 18px; border-radius: 12px 12px 12px 4px; background: #fff; box-shadow: 0 1px 1px rgba(0, 0, 0, .12); line-height: 1.38; color: #000; overflow-wrap: anywhere; }
.tg-msg i { color: #555; font-size: 11.5px; }
.tg-msg.is-new { animation: tg-in .5s cubic-bezier(.2, .8, .3, 1.2) both; }
@keyframes tg-in { from { opacity: 0; transform: translateY(18px) scale(.96); } }
.tg-a { color: #168acd; }
.tg-ora { position: absolute; right: 9px; bottom: 4px; font-size: 10.5px; color: #8a8a8a; }
.tg-input { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 9px 14px; background: #fff; color: #999; border-top: 1px solid #e6e6e6; }
.tg-input .icona { color: #3390ec; width: 20px; height: 20px; }

/* Notifiche di sistema sopra gli schermi (MacBook e prototipo) */
.os-layer { position: absolute; top: 14px; right: 14px; z-index: 80; display: grid; gap: 10px; width: 360px; pointer-events: none; }
.os-banner { pointer-events: auto; cursor: default; }
.os-banner.is-out { animation: banner-out .4s ease both; }
@keyframes banner-out { to { opacity: 0; transform: translateX(40px); } }

/* Lezione appresa dall'AI (scena dell'apprendimento) */
.ai-lezione { position: absolute; right: 22px; bottom: 22px; z-index: 50; display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; width: 420px; padding: 16px 18px; background: #fff; border: 1px solid var(--bordo-tenue); border-left: 4px solid var(--petrolio); border-radius: 6px; box-shadow: 0 14px 36px rgba(0, 0, 0, .14); font-size: 14px; color: var(--ink); animation: swap-in .5s ease both; }
.ai-lezione img { grid-row: span 3; width: 64px; height: 64px; }
.ai-lezione b { font-size: 15px; }
.ai-lezione p { color: var(--muted); line-height: 1.45; }
.ai-lezione small { color: var(--petrolio); font-weight: 600; }

/* =========================================================================
   04 Prova tu: MacBook su desktop, iPhone su smartphone
   ========================================================================= */
.finale { background: radial-gradient(ellipse at 50% 0%, #0f6d65 0%, var(--abisso) 55%, #032b28 100%); color: #fff; padding: 88px clamp(12px, 3vw, 48px) 100px; }
.finale-inner { width: min(1500px, 100%); margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.finale-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; }
.finale-head h2 { font-size: clamp(28px, 3vw, 44px); }
.finale-note { font-size: 14px; color: rgba(255, 255, 255, .7); }
.missions { display: flex; flex-wrap: wrap; gap: 6px; counter-reset: mission; }
.missions li { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 5px; border-radius: 999px; counter-increment: mission; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .18); font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .85); transition: background .3s ease, border-color .3s ease; }
.missions li::before { content: counter(mission); display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; background: rgba(255, 255, 255, .16); font-size: 11px; font-weight: 800; }
.missions li.is-done { background: rgba(20, 184, 166, .28); border-color: #2dd4bf; color: #fff; }
.missions li.is-done::before { content: "✓"; background: var(--ambra); color: #1c1917; }

.proto-device { position: relative; display: flex; flex-direction: column; width: 100%; }
.proto-screen { position: relative; display: flex; flex-direction: column; height: clamp(520px, calc(100svh - 250px), 900px); padding: 12px 12px 16px; background: #0b0d11; border: 1.5px solid #474d57; border-radius: 18px 18px 4px 4px; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .7); }
.proto-screen > .br-bar { border-radius: 6px 6px 0 0; }
.proto-app { position: relative; flex: 1; min-height: 0; border-radius: 0 0 4px 4px; overflow: hidden; }
.proto-app .tm-view { height: 100%; }
.proto-base { margin: 0 -3%; }
.proto-status { display: none; }
.proto-screen .os-layer { top: 60px; right: 26px; }
.br-bar { flex: 0 0 38px; display: flex; align-items: center; gap: 12px; padding: 0 12px; background: #e9edf0; border-bottom: 1px solid #d5dbe0; font-size: 12px; color: #4a5566; }
.br-dots { display: flex; gap: 6px; }
.br-dots i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.br-dots i:nth-child(2) { background: #febc2e; }
.br-dots i:nth-child(3) { background: #28c840; }
.br-address { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: #fff; color: #6b7686; min-width: 0; white-space: nowrap; overflow: hidden; }
.br-lock { width: 8px; height: 7px; border-radius: 1px; background: #8b95a3; position: relative; margin-top: 3px; flex: none; }
.br-lock::before { content: ""; position: absolute; left: 1px; top: -5px; width: 4px; height: 5px; border: 1.5px solid #8b95a3; border-bottom: 0; border-radius: 3px 3px 0 0; }
.proto-label { padding: 2px 9px; border-radius: 999px; border: 1px solid #c4ccd3; color: #5b6673; font-size: 11px; font-weight: 600; background: #f6f8f9; }
.proto-reset { flex: none; padding: 4px 12px; border-radius: 999px; border: 1px solid #c4ccd3; background: #fff; color: #334155; font-size: 12px; font-weight: 600; }
.proto-reset:hover { border-color: var(--petrolio); color: var(--petrolio); }
.proto-reset-mobile { display: none; }

/* =========================================================================
   05 Alesca
   ========================================================================= */
.outro { display: grid; place-items: center; background: #fff; padding: 100px 16px 130px; }
.outro-inner { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.outro-logo { width: clamp(180px, 26vw, 320px); height: auto; }
.outro-link { font-size: 14px; font-weight: 600; color: var(--soft); }
.outro-link:hover { color: var(--petrolio); }

/* =========================================================================
   Indice e player
   ========================================================================= */
.chapter-nav { position: fixed; right: 22px; top: 50%; z-index: 30; display: grid; gap: 14px; transform: translateY(-50%); }
.chapter-nav a { position: relative; display: block; width: 10px; height: 10px; }
.chapter-nav a::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(82, 82, 91, .35); box-shadow: 0 0 0 2px rgba(255, 255, 255, .7); transition: transform .25s ease, background .25s ease; }
.chapter-nav a[aria-current]::after { background: var(--petrolio); transform: scale(1.5); }
.chapter-nav a span { position: absolute; right: 22px; top: 50%; transform: translate(6px, -50%); white-space: nowrap; pointer-events: none; padding: 6px 12px; border-radius: 999px; background: var(--abisso); color: #fff; font-size: 12.5px; font-weight: 600; opacity: 0; transition: opacity .2s ease, transform .2s ease; }
.chapter-nav a:hover span, .chapter-nav a:focus-visible span { opacity: 1; transform: translate(0, -50%); }

.player { position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 30; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; padding: 5px; border-radius: 999px; overflow: hidden; background: rgba(5, 63, 59, .86); border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(14px); box-shadow: 0 16px 40px rgba(5, 63, 59, .3); color: #fff; }
.player > button { width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; color: #fff; font-size: 16px; }
.player > button:hover:not(:disabled) { background: rgba(255, 255, 255, .14); }
.player > .chapter-jump { font-size: 20px; line-height: 1; padding-bottom: 3px; }
.player #play { background: var(--petrolio-chiaro); color: #042f2c; }
.player #play:hover { background: #2dd4bf; }
.player-counter { min-width: 60px; text-align: center; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.player-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; }
.player-progress i { display: block; height: 100%; background: var(--ambra); transform-origin: left; transform: scaleX(0); }

/* Stato della scena fissata */
.story-progress { display: none; }
.story-chapter .story-progress { display: flex; align-items: center; gap: 14px; margin-top: 22px; font-size: 12.5px; font-weight: 700; }
.story-chapter .story-progress + .step-choices { margin-top: 10px; }
.story-position { font-variant-numeric: tabular-nums; color: var(--petrolio); }
.story-hint { margin-left: auto; color: var(--soft); font-size: 12px; font-weight: 600; }
.story-chapter .spread { height: 100vh; height: 100svh; min-height: 0; }

@media (max-height: 800px) and (min-width: 901px) {
  .story-chapter .lead { display: none; }
  .story-chapter .spread { padding-top: 92px; padding-bottom: 100px; }
}

/* =========================================================================
   Smartphone e tablet stretti
   ========================================================================= */
@media (max-width: 900px) {
  h2 { font-size: clamp(30px, 8vw, 46px); }
  .masthead { height: 60px; }
  .brand { font-size: 14px; padding: 4px 12px 4px 4px; }
  .brand-mark, .brand-mark img { width: 28px; height: 28px; }
  .chapter-nav { display: none; }

  /* Radar in alto, testo sotto, sopra il player */
  .radar-wrap { right: auto; left: 50%; top: 70px; width: clamp(220px, calc(100svh - 500px), 92vw); margin: 0 0 0 calc(clamp(220px, calc(100svh - 500px), 92vw) / -2); }
  .intro-copy { left: 16px; right: 16px; top: auto; bottom: calc(96px + env(safe-area-inset-bottom)); width: auto; transform: none; }
  .intro-copy h1 { font-size: clamp(30px, 8.6vw, 44px); }
  .intro-lead { margin-top: 12px; font-size: 15px; }
  .intro-actions { margin-top: 16px; gap: 12px 18px; }
  .intro-actions .button { padding: 12px 18px; font-size: 14px; }
  .floater.f1 { left: auto; right: 3%; top: 9%; width: 52px; }
  .floater.f2 { left: 3%; top: 30%; width: 48px; }
  .floater.f3, .floater.f4, .floater.f5 { display: none; }
  .blip-label { max-width: 140px; font-size: 11px; padding: 5px 8px 6px; }
  .blip-label b { font-size: 11.5px; }
  .blip-label span { display: none; }

  .spread { grid-template-columns: 1fr; padding: 88px 16px 110px; gap: 28px; }
  .stage { padding: 0; }
  .stage .macbook { display: none; }
  .phone-dock { position: relative; width: min(280px, 78vw); margin: 0 auto; }
  .proto-tag { top: -26px; }

  /* Scena fissata: una colonna, il telefono riempie lo spazio che resta */
  .story-chapter .spread { display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 12px; padding: 72px 16px calc(84px + env(safe-area-inset-bottom)); }
  .story-chapter .copy { display: contents; }
  .story-chapter h2 { order: 1; font-size: clamp(24px, 6.6vw, 34px); }
  .story-chapter .lead { display: none; }
  .story-chapter .story-progress { order: 2; margin: 0; }
  .story-chapter .story-hint { display: none; }
  .story-chapter .step-choices { order: 3; margin: 0; padding-top: 0; border: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; }
  .story-chapter .step-choices::-webkit-scrollbar { display: none; }
  .story-chapter .step-choices button { flex: none; padding: 7px 12px; font-size: 13px; }
  .story-chapter .step-caption { order: 4; min-height: 0; margin: 0; font-size: 13.5px; line-height: 1.45; padding-left: 10px; }
  .story-chapter .stage { order: 5; flex: 1; min-height: 0; display: flex; justify-content: center; align-items: flex-start; padding-top: 4px; }
  .story-chapter .phone-dock { width: min(280px, calc((100svh - 370px) * 320 / 660), 80vw); }
  .story-chapter .proto-tag { display: none; }

  .finale { padding: 72px 12px calc(84px + env(safe-area-inset-bottom)); }
  .finale-head { gap: 2px 12px; }
  .finale-head h2 { font-size: 26px; }
  .finale-note { font-size: 12.5px; }
  .missions { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -12px; padding-inline: 12px; }
  .missions::-webkit-scrollbar { display: none; }
  .missions li { flex: none; font-size: 12px; }
  /* Il prototipo dentro un iPhone a grandezza naturale */
  .proto-device { align-self: center; width: min(400px, 100%); }
  .proto-screen { height: min(820px, calc(100svh - 296px)); min-height: 440px; padding: 0; border: 7px solid #080b10; border-radius: 44px; background: #fff; box-shadow: 0 30px 60px rgba(0, 0, 0, .45), 0 0 0 1.5px #9eaeb9, 0 0 0 3px #52616d; overflow: hidden; }
  .proto-screen > .br-bar, .proto-base { display: none; }
  .proto-status { display: flex; }
  .proto-app { border-radius: 0; }
  .proto-screen .os-layer { top: 44px; left: 8px; right: 8px; width: auto; }
  .proto-reset-mobile { display: inline-flex; align-self: center; padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .3); background: transparent; color: #fff; font-size: 13px; font-weight: 600; }
  .ai-lezione { width: auto; left: 10px; right: 10px; bottom: 10px; grid-template-columns: 1fr; }
  .ai-lezione img { display: none; }
}
@media (max-width: 900px) and (max-height: 700px) {
  .story-chapter .step-caption { display: none; }
  .intro-lead { display: none; }
}
@media (max-width: 1100px) and (min-width: 901px) { .chapter-nav { right: 10px; } .stage { padding-right: 11%; } }
@media (max-width: 600px) { .player-counter { min-width: 48px; } .player > button { width: 38px; height: 38px; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition: none !important; }
}

/* Nella scena dell'AI su desktop basta il MacBook; nel telefono la lezione occupa la larghezza */
@media (min-width: 901px) { .stage-ai .phone-dock { display: none; } }
.phone-view .ai-lezione { left: 8px; right: 8px; bottom: 8px; width: auto; grid-template-columns: 1fr; padding: 12px 14px; font-size: 12.5px; }
.phone-view .ai-lezione img { display: none; }
.phone-view .os-layer { left: 8px; right: 8px; width: auto; }

/* Passaggio Telegram su desktop: il telefono viene in primo piano */
.stage .macbook, .stage .phone-dock { transition: transform .7s cubic-bezier(.2, .7, .2, 1), opacity .5s ease; }
.phone-dock { transform-origin: 100% 100%; }
@media (min-width: 901px) {
  .stage.focus-phone .phone-dock { transform: translate(-14%, 2%) scale(1.6); }
  .stage.focus-phone .macbook { opacity: .45; transform: scale(.97); }
}

/* Anteprima della mail o del messaggio Telegram, aperta da un avviso del prototipo */
button.os-banner { font-family: inherit; border: 0; cursor: pointer; width: 100%; }
button.os-banner:hover { background: #fff; }
.os-preview { position: absolute; inset: 0; z-index: 90; display: grid; place-items: center; padding: 56px 16px 24px; background: rgba(3, 43, 40, .55); animation: swap-in .3s ease both; }
.os-preview-card { position: relative; max-height: 100%; display: flex; }
.os-preview-mail { width: min(640px, 92vw); max-height: 100%; display: flex; flex-direction: column; overflow: hidden; border-radius: 10px; background: #fff; box-shadow: 0 30px 70px rgba(0, 0, 0, .4); }
.os-preview-head { flex: none; padding: 12px 16px; border-bottom: 1px solid #e4e4e7; font-size: 14px; color: var(--ink); }
.os-preview-head b { display: block; line-height: 1.3; }
.os-preview-head span { font-size: 12px; color: var(--muted); }
.os-preview-mail .wm-mail { overflow-y: auto; overscroll-behavior: contain; animation: none; }
.os-preview-phone { width: 320px; height: min(600px, 100%); border: 7px solid #080b10; border-radius: 40px; overflow: hidden; background: #fff; box-shadow: 0 30px 70px rgba(0, 0, 0, .45); padding-top: 18px; }
.os-preview-close { position: absolute; top: -14px; right: -14px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: #fff; color: var(--ink); font-size: 20px; line-height: 1; box-shadow: 0 6px 16px rgba(0, 0, 0, .3); }
@media (max-width: 900px) {
  .os-preview { padding: 48px 8px 12px; }
  .os-preview-phone { width: 100%; max-width: 320px; }
  .os-preview-close { top: -10px; right: -4px; }
}