:root {
  --paper: #F4F2EE; --sheet: #FFFFFF; --ink: #17202B; --muted: #5D6873; --rule: #DDD8CF;
  --accent: #2447C9; --accent-ink: #FFFFFF; --accent-soft: #E6EBFB; --ok: #1F7A4D; --ok-soft: #DDF0E5; --warm: #B4541A;
  --f-display: ui-serif, "New York", "Iowan Old Style", Georgia, serif;
  --f-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r: 10px;
  --ombra: 0 1px 2px rgba(23, 32, 43, 0.06), 0 8px 28px rgba(23, 32, 43, 0.08);
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #12161B; --sheet: #1A2028; --ink: #E7EAEE; --muted: #9AA5AF; --rule: #2C343E;
    --accent: #8EA6FF; --accent-ink: #0E1420; --accent-soft: #1E2A4D; --ok: #5FCB92; --ok-soft: #173326; --warm: #F0A06A;
    --ombra: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 28px rgba(0, 0, 0, 0.35);
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.6 var(--f-body); -webkit-font-smoothing: antialiased; }
a { color: var(--accent); }
.contenitore { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.stretto { max-width: 720px; }

/* Header */
header.alto { position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid transparent; }
header.alto .contenitore { display: flex; justify-content: space-between; align-items: center; height: 64px; }
.marchio { display: flex; align-items: center; gap: 10px; font: 700 21px var(--f-display); color: var(--ink); text-decoration: none; letter-spacing: -0.01em; }
.marchio .segno { width: 30px; height: 30px; border-radius: 8px; background: var(--ink); color: var(--paper); display: grid; place-items: center; font: 700 17px var(--f-display); }
nav { display: flex; align-items: center; gap: 22px; }
nav a { color: var(--muted); text-decoration: none; font-size: 15px; }
nav a:hover { color: var(--ink); }
.pulsante { display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: var(--accent-ink); text-decoration: none; font-weight: 600; font-size: 15.5px; padding: 11px 18px; border-radius: 999px; border: 0; }
.pulsante:hover { filter: brightness(1.06); }
.pulsante.secondario { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule); }
nav .pulsante { color: var(--accent-ink); padding: 8px 14px; font-size: 14.5px; }

/* Hero */
.hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; padding: 56px 0 72px; }
.occhiello { display: inline-block; font-size: 13.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--warm); margin-bottom: 14px; }
h1 { font: 600 clamp(36px, 5.4vw, 58px)/1.06 var(--f-display); letter-spacing: -0.02em; margin: 0 0 18px; }
.sotto { font-size: 19px; color: var(--muted); margin: 0 0 26px; max-width: 34em; }
.azioni { display: flex; gap: 12px; flex-wrap: wrap; }
.nota { font-size: 14px; color: var(--muted); margin-top: 16px; }

/* Mock of Alfred's "Oggi" */
.schermo { background: var(--sheet); border-radius: 14px; box-shadow: var(--ombra); border: 1px solid var(--rule); overflow: hidden; }
.schermo .barra { display: flex; gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--rule); align-items: center; }
.schermo .barra i { width: 10px; height: 10px; border-radius: 50%; background: var(--rule); display: block; }
.schermo .barra span { margin-left: 10px; font-size: 13px; color: var(--muted); }
.schermo .corpo { padding: 16px; display: grid; gap: 12px; }
.bozza { border: 1px solid var(--rule); border-radius: var(--r); padding: 14px; background: var(--paper); }
.bozza .chi { display: flex; justify-content: space-between; font-size: 14px; }
.bozza .chi b { font-weight: 650; }
.etichetta { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.etichetta.verde { background: var(--ok-soft); color: var(--ok); }
.ricevuto { font-size: 14px; color: var(--muted); margin: 8px 0; border-left: 2px solid var(--rule); padding-left: 10px; }
.proposta { font-size: 14.5px; background: var(--sheet); border: 1px solid var(--rule); border-radius: 8px; padding: 10px 12px; }
.perche { font-size: 12.5px; color: var(--muted); margin-top: 8px; }
.tasti { display: flex; gap: 8px; margin-top: 10px; }
.tasti span { font-size: 13px; padding: 6px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--rule); }
.tasti .primo { background: var(--accent); color: var(--accent-ink); box-shadow: none; font-weight: 600; }
.fatto { font-size: 13.5px; display: flex; gap: 8px; align-items: baseline; color: var(--muted); }
.fatto::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none; transform: translateY(-1px); }

/* Sections */
section { padding: 72px 0; }
section.chiara { background: var(--sheet); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
h2 { font: 600 clamp(28px, 3.6vw, 38px)/1.15 var(--f-display); letter-spacing: -0.015em; margin: 0 0 14px; }
.intro { font-size: 18px; color: var(--muted); margin: 0 0 34px; max-width: 40em; }
h3 { font-size: 17.5px; font-weight: 650; margin: 0 0 6px; }
.griglia { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.griglia.due { grid-template-columns: repeat(2, 1fr); }
.carta { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r); padding: 22px; }
section.chiara .carta { background: var(--paper); }
.carta p { margin: 0; color: var(--muted); font-size: 15.5px; }
.icona { width: 36px; height: 36px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; margin-bottom: 14px; }
.icona svg { width: 20px; height: 20px; }

.dolori { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.dolore { display: flex; gap: 14px; align-items: flex-start; background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r); padding: 18px 20px; font-size: 16.5px; }
.dolore b { font: 600 22px var(--f-display); color: var(--warm); line-height: 1; }

/* A day with Alfred */
.giornata { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; border-left: 2px solid var(--rule); margin-left: 8px; }
.giornata li { position: relative; padding: 0 0 26px 28px; }
.giornata li::before { content: ""; position: absolute; left: -7px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--sheet); box-shadow: inset 0 0 0 3px var(--accent); }
.giornata .ora { font-size: 13.5px; font-weight: 650; color: var(--accent); letter-spacing: 0.02em; }
.giornata h3 { margin: 2px 0 4px; }
.giornata p { margin: 0; color: var(--muted); }

.canali { display: flex; flex-wrap: wrap; gap: 10px; }
.canali span { background: var(--sheet); border: 1px solid var(--rule); border-radius: 999px; padding: 8px 16px; font-size: 15px; }
.canali span small { color: var(--muted); }

.punti { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.punti li { display: flex; gap: 12px; }
.punti li::before { content: "✓"; color: var(--ok); font-weight: 700; }

/* FAQ */
details { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r); padding: 0 20px; margin-bottom: 10px; }
summary { cursor: pointer; padding: 18px 0; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--muted); font-weight: 400; font-size: 22px; line-height: 1; }
details[open] summary::after { content: "–"; }
details p { margin: 0 0 18px; color: var(--muted); }

/* Final call */
.chiamata { background: var(--ink); color: var(--paper); border-radius: 18px; padding: 48px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: center; }
.chiamata h2 { color: var(--paper); }
.chiamata p { color: color-mix(in srgb, var(--paper) 75%, transparent); margin: 0; }
.chiamata .pulsante { background: var(--paper); color: var(--ink); }
.chiamata .email { font-size: 15px; margin-top: 12px; }
.chiamata .email a { color: var(--paper); }

footer { padding: 40px 0 56px; color: var(--muted); font-size: 14px; }
footer .contenitore { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* Legal pages */
.legale { padding: 40px 0 24px; font-size: 16px; }
.legale h1 { font-size: clamp(32px, 5vw, 44px); }
.legale h2 { font-size: 22px; margin: 36px 0 10px; }
.legale table { border-collapse: collapse; width: 100%; font-size: 15px; background: var(--sheet); border-radius: var(--r); overflow: hidden; }
.legale th, .legale td { text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); padding: 10px 12px; }
.legale .scroll { overflow-x: auto; }

@media (max-width: 860px) {
  .hero, .chiamata { grid-template-columns: 1fr; }
  .hero { padding-top: 32px; gap: 36px; }
  .griglia, .griglia.due, .dolori { grid-template-columns: 1fr; }
  .griglia.due { gap: 40px; }
  nav a:not(.pulsante) { display: none; }
  section { padding: 56px 0; }
  .chiamata { padding: 32px 24px; }
}

/* ---- Multi-page site ---- */
.marchio img { width: 32px; height: 32px; display: block; }
nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.menu { display: none; }
/* Language flags: same page in another language. */
.lingue { display: flex; align-items: center; gap: 6px; margin-left: 20px; }
.lingue a, .lingue a:not(.pulsante) { display: block; line-height: 0; border-radius: 3px; opacity: .5; transition: opacity .15s; }
.lingue a:hover, .lingue a:focus-visible, .lingue a[aria-current] { opacity: 1; }
.lingue a[aria-current] { outline: 2px solid var(--ink); outline-offset: 2px; }
.lingue img { width: 21px; height: 14px; display: block; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.12); }
.titolo-pagina { padding: 56px 0 24px; }
.titolo-pagina h1 { max-width: 18em; }
.titolo-pagina .sotto { max-width: 40em; }
.dueparti { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.dueparti.inverso > :first-child { order: 2; }
.dueparti h2 { margin-top: 0; }
.dueparti p { color: var(--muted); }
.cornice { background: var(--sheet); border: 1px solid var(--rule); border-radius: 14px; box-shadow: var(--ombra); overflow: hidden; }
.cornice .barra { display: flex; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--rule); }
.cornice .barra i { width: 9px; height: 9px; border-radius: 50%; background: var(--rule); display: block; }
.cornice img { display: block; width: 100%; height: auto; }
.didascalia { font-size: 14px; color: var(--muted); margin-top: 10px; }
.elenco-vantaggi { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; }
.elenco-vantaggi li { padding-left: 26px; position: relative; color: var(--ink); }
.elenco-vantaggi li::before { content: ""; position: absolute; left: 0; top: 7px; width: 14px; height: 14px; border-radius: 4px; background: var(--ok-soft); box-shadow: inset 0 0 0 4px var(--ok); }
.numero-grande { font: 600 44px/1 var(--f-display); color: var(--accent); }
.passi { counter-reset: passo; list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.passi li { counter-increment: passo; background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r); padding: 22px 22px 22px 76px; position: relative; }
.passi li::before { content: counter(passo); position: absolute; left: 22px; top: 20px; width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: var(--paper); display: grid; place-items: center; font: 600 17px var(--f-display); }
.passi h3 { margin-bottom: 4px; }
.passi p { margin: 0; color: var(--muted); }
.citazione { font: 500 clamp(22px, 2.6vw, 28px)/1.35 var(--f-display); max-width: 30em; margin: 0; }

/* The brain diagram: sources → Alfred's memory → work prepared for you */
.cervello { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 18px; align-items: stretch; }
.colonna { background: var(--sheet); border: 1px solid var(--rule); border-radius: 14px; padding: 20px; }
.colonna h3 { font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.colonna ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.colonna li { background: var(--paper); border-radius: 8px; padding: 9px 12px; font-size: 15px; }
.colonna.centro { background: var(--ink); color: var(--paper); border-color: var(--ink); position: relative; }
.colonna.centro h3 { color: color-mix(in srgb, var(--paper) 70%, transparent); }
.colonna.centro li { background: color-mix(in srgb, var(--paper) 10%, transparent); }
.colonna.centro .nome { display: flex; align-items: center; gap: 10px; font: 600 22px var(--f-display); margin-bottom: 14px; }
.colonna.centro .nome img { width: 34px; height: 34px; }
.colonna.fine li { background: var(--ok-soft); }
.freccia { display: none; }
@media (min-width: 861px) {
  .cervello { position: relative; }
  .colonna.centro::before, .colonna.centro::after { content: "→"; position: absolute; top: 50%; transform: translateY(-50%); font-size: 22px; color: var(--muted); }
  .colonna.centro::before { left: -16px; }
  .colonna.centro::after { right: -16px; }
}

/* Archive tree */
.albero { font: 14.5px/1.75 ui-monospace, Menlo, monospace; background: var(--sheet); border: 1px solid var(--rule); border-radius: 14px; padding: 20px 22px; box-shadow: var(--ombra); overflow-x: auto; white-space: pre; }
.albero .c { color: var(--accent); font-weight: 600; }
.albero .n { color: var(--muted); }
.albero .d { color: var(--ok); font-weight: 600; }

/* Autonomy levels */
.livelli { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.livello { background: var(--sheet); border: 1px solid var(--rule); border-radius: 14px; padding: 22px; }
.livello .tag { display: inline-block; font-size: 12.5px; font-weight: 650; padding: 3px 10px; border-radius: 999px; margin-bottom: 12px; }
.livello.l1 .tag { background: var(--accent-soft); color: var(--accent); }
.livello.l2 .tag { background: var(--ok-soft); color: var(--ok); }
.livello.l3 .tag { background: color-mix(in srgb, var(--warm) 15%, transparent); color: var(--warm); }
.livello p { color: var(--muted); font-size: 15.5px; margin: 0 0 10px; }
.livello ul { margin: 0; padding-left: 18px; font-size: 15px; }

/* Animated demo */
.demo-animata { background: var(--sheet); border: 1px solid var(--rule); border-radius: 16px; box-shadow: var(--ombra); overflow: hidden; }
.demo-animata .barra { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--rule); font-size: 13px; color: var(--muted); }
.demo-animata .barra .puntini { display: flex; gap: 6px; }
.demo-animata .barra .puntini i { width: 9px; height: 9px; border-radius: 50%; background: var(--rule); display: block; }
.demo-animata .scena { display: none; padding: 22px; min-height: 290px; }
.demo-animata .scena.attiva { display: block; animation: entra 0.45s ease both; }
.demo-animata .passo { font-size: 12.5px; font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase; color: var(--warm); margin-bottom: 12px; }
.fumetto { max-width: 88%; background: var(--paper); border-radius: 14px 14px 14px 4px; padding: 12px 14px; font-size: 15px; margin-bottom: 10px; }
.fumetto .da { font-size: 12.5px; color: var(--muted); display: block; margin-bottom: 4px; }
.fumetto.vocale .onda { display: flex; gap: 3px; align-items: center; height: 22px; margin: 4px 0 8px; }
.fumetto.vocale .onda i { width: 3px; border-radius: 2px; background: var(--muted); display: block; animation: onda 1.1s ease-in-out infinite; }
.trascritto { font-size: 14.5px; border-left: 2px solid var(--ok); padding-left: 10px; color: var(--ink); }
.trascritto b { color: var(--ok); font-size: 12.5px; display: block; }
.proposta-anim { background: var(--paper); border: 1px solid var(--rule); border-radius: 10px; padding: 14px; font-size: 15px; }
.proposta-anim .scrive::after { content: "▍"; animation: lampeggia 1s steps(1) infinite; color: var(--accent); }
.tasti-anim { display: flex; gap: 8px; margin-top: 12px; }
.tasti-anim span { font-size: 13.5px; padding: 7px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--rule); }
.tasti-anim .primo { background: var(--accent); color: var(--accent-ink); box-shadow: none; font-weight: 600; }
.tasti-anim .primo.premuto { animation: premi 0.6s ease 0.8s both; }
.esito { display: grid; gap: 10px; }
.esito div { display: flex; gap: 10px; align-items: flex-start; background: var(--paper); border-radius: 10px; padding: 12px 14px; font-size: 15px; opacity: 0; animation: entra 0.4s ease both; }
.esito div:nth-child(2) { animation-delay: 0.5s; }
.esito div:nth-child(3) { animation-delay: 1s; }
.esito div:nth-child(4) { animation-delay: 1.5s; }
.esito .ic { width: 22px; height: 22px; border-radius: 6px; background: var(--ok-soft); color: var(--ok); display: grid; place-items: center; font-size: 13px; flex: none; }
.demo-animata .punti-scene { display: flex; gap: 6px; justify-content: center; padding: 0 0 16px; }
.demo-animata .punti-scene button { width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; background: var(--rule); cursor: pointer; }
.demo-animata .punti-scene button.attivo { background: var(--accent); width: 22px; border-radius: 4px; }
@keyframes entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes onda { 0%, 100% { height: 6px; } 50% { height: 20px; } }
@keyframes lampeggia { 50% { opacity: 0; } }
@keyframes premi { 0% { transform: scale(1); } 40% { transform: scale(0.92); } 100% { transform: scale(1); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 20%, transparent); } }
@media (prefers-reduced-motion: reduce) {
  .demo-animata .scena, .esito div, .fumetto.vocale .onda i { animation: none !important; opacity: 1; }
}

/* Sector cards */
.settori { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.settore { background: var(--sheet); border: 1px solid var(--rule); border-radius: 14px; padding: 26px; }
.settore h3 { font: 600 22px var(--f-display); margin-bottom: 8px; }
.settore p { color: var(--muted); margin: 0 0 12px; }
.settore .esempio { background: var(--paper); border-radius: 10px; padding: 12px 14px; font-size: 15px; }
.settore .esempio b { display: block; font-size: 12.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--warm); margin-bottom: 4px; }

footer.piede { background: var(--ink); color: color-mix(in srgb, var(--paper) 70%, transparent); padding: 48px 0 40px; margin-top: 40px; }
footer.piede .contenitore { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; }
footer.piede a { color: var(--paper); text-decoration: none; }
footer.piede h4 { color: var(--paper); font-size: 14px; letter-spacing: 0.05em; text-transform: uppercase; margin: 0 0 12px; }
footer.piede ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: 15px; }
footer.piede .legale-piede { grid-column: 1 / -1; border-top: 1px solid color-mix(in srgb, var(--paper) 15%, transparent); padding-top: 18px; font-size: 13.5px; }

@media (max-width: 860px) {
  .dueparti, .cervello, .livelli, .settori, footer.piede .contenitore { grid-template-columns: 1fr; }
  .dueparti.inverso > :first-child { order: 0; }
  .menu { display: inline-flex; order: 3; }
  .lingue { order: 2; margin: 0 12px 0 auto; gap: 5px; }
  .lingue img { width: 19px; height: 13px; }
  nav.principale { display: none; position: absolute; top: 64px; left: 0; right: 0; background: var(--paper); flex-direction: column; align-items: stretch; padding: 12px 20px 20px; border-bottom: 1px solid var(--rule); gap: 4px; }
  nav.principale.aperta { display: flex; }
  nav.principale a, nav.principale a:not(.pulsante) { display: block; padding: 10px 0; font-size: 17px; }
  nav.principale .pulsante { text-align: center; justify-content: center; margin-top: 8px; }
}
footer.piede .marchio img { border-radius: 8px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--paper) 25%, transparent); }
/* Grid items may shrink below their content: wide blocks (the archive tree) scroll inside. */
.hero > *, .dueparti > *, .griglia > *, .cervello > *, .livelli > *, .settori > *, .chiamata > * { min-width: 0; }

/* ---- Motion: blocks rise in as they scroll into view (only with JS and when motion is welcome) ---- */
.js-moto .rivela { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); transition-delay: var(--ritardo, 0s); }
.js-moto .rivela.vista { opacity: 1; transform: none; }

/* ---- Running ticker of trades ---- */
.nastro { overflow: hidden; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--sheet); padding: 16px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.nastro .scorre { display: flex; gap: 12px; width: max-content; animation: nastro 48s linear infinite; }
.nastro:hover .scorre { animation-play-state: paused; }
.nastro span { white-space: nowrap; font-size: 15px; padding: 6px 14px; border-radius: 999px; background: var(--paper); color: var(--ink); }
.nastro span::before { content: "●"; color: var(--accent); font-size: 8px; vertical-align: 3px; margin-right: 8px; }
@keyframes nastro { to { transform: translateX(-50%); } }

/* ---- How Alfred reasons: an animated flow ---- */
.flusso { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.nodi { list-style: none; margin: 0; padding: 0; position: relative; }
.nodi::before { content: ""; position: absolute; left: 23px; top: 24px; bottom: 24px; width: 2px; background: var(--rule); }
.nodi .avanzamento { position: absolute; left: 23px; top: 24px; width: 2px; height: 0; background: var(--accent); transition: height .6s cubic-bezier(.4,0,.2,1); }
.nodo { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; padding: 8px 0; cursor: pointer; }
.nodo .cerchio { width: 48px; height: 48px; border-radius: 50%; background: var(--sheet); border: 2px solid var(--rule); display: grid; place-items: center; color: var(--muted); position: relative; z-index: 1; transition: all .35s ease; }
.nodo.bivio .cerchio { border-radius: 12px; transform: rotate(45deg) scale(.86); }
.nodo.bivio .cerchio svg { transform: rotate(-45deg); }
.nodo .cerchio svg { width: 22px; height: 22px; }
.nodo h3 { margin: 4px 0 2px; font-size: 16.5px; transition: color .3s; }
.nodo p { margin: 0; font-size: 14.5px; color: var(--muted); }
.nodo .scelte { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.nodo .scelte span { font-size: 12.5px; padding: 2px 10px; border-radius: 999px; background: var(--paper); color: var(--muted); transition: all .3s; }
.nodo.passato .cerchio { border-color: var(--accent); color: var(--accent); }
.nodo.attivo .cerchio { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 14%, transparent); }
.nodo.attivo h3 { color: var(--accent); }
.nodo.attivo .scelte .presa, .nodo.passato .scelte .presa { background: var(--accent); color: var(--accent-ink); }
.pensiero { --scuro: #17202B; --chiaro: #F4F2EE; position: sticky; top: 96px; background: var(--scuro); color: var(--chiaro); border: 1px solid color-mix(in srgb, var(--chiaro) 10%, transparent); border-radius: 18px; padding: 26px; box-shadow: var(--ombra); min-height: 340px; }
.pensiero .testa { display: flex; align-items: center; gap: 10px; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; color: color-mix(in srgb, var(--chiaro) 65%, transparent); margin-bottom: 18px; }
.pensiero .testa img { width: 26px; height: 26px; border-radius: 7px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--chiaro) 25%, transparent); }
.pensiero .testa .vivo { margin-left: auto; width: 8px; height: 8px; border-radius: 50%; background: #5FCB92; animation: respira 1.6s ease-in-out infinite; }
.pensiero h4 { font: 600 24px/1.25 var(--f-display); margin: 0 0 14px; color: var(--chiaro); }
.pensiero .righe { display: grid; gap: 8px; }
.pensiero .righe div { background: color-mix(in srgb, var(--chiaro) 9%, transparent); border-radius: 10px; padding: 10px 13px; font-size: 15px; opacity: 0; animation: entra .45s ease both; }
.pensiero .righe div b { color: #9FB4FF; font-weight: 600; }
.pensiero .righe div.ok b { color: #5FCB92; }
.pensiero .righe div:nth-child(2) { animation-delay: .35s; } .pensiero .righe div:nth-child(3) { animation-delay: .7s; } .pensiero .righe div:nth-child(4) { animation-delay: 1.05s; }
.pensiero .bozza-viva { background: var(--chiaro); color: var(--scuro); border-radius: 12px; padding: 13px 15px; font-size: 15px; }
.pensiero .bozza-viva .scrive::after { content: "▍"; color: #2447C9; animation: lampeggia 1s steps(1) infinite; }
.pensiero .comandi { display: flex; gap: 8px; margin-top: 18px; }
.pensiero .comandi button { font: 600 13px var(--f-body); border-radius: 999px; border: 0; padding: 7px 14px; cursor: pointer; background: color-mix(in srgb, var(--chiaro) 12%, transparent); color: var(--chiaro); }
@keyframes respira { 50% { opacity: .35; transform: scale(.8); } }

/* ---- Alfred at work: one animated story per trade ---- */
.storie { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: start; }
.schede-storie { display: grid; gap: 6px; }
.schede-storie button { text-align: left; border: 1px solid var(--rule); background: var(--sheet); border-radius: 12px; padding: 12px 14px; cursor: pointer; font: inherit; color: var(--ink); display: grid; gap: 2px; position: relative; overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.schede-storie button b { font-size: 15.5px; }
.schede-storie button small { color: var(--muted); font-size: 13px; }
.schede-storie button[aria-selected="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.schede-storie button .barretta { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--accent); }
.schede-storie button[aria-selected="true"] .barretta { animation: riempi var(--durata, 24s) linear both; }
@keyframes riempi { to { width: 100%; } }
.palco { display: grid; grid-template-columns: minmax(0, 290px) minmax(0, 1fr); gap: 20px; background: var(--sheet); border: 1px solid var(--rule); border-radius: 20px; padding: 22px; box-shadow: var(--ombra); min-height: 440px; }
.telefono { background: var(--paper); border-radius: 26px; border: 6px solid #17202B; box-shadow: 0 0 0 1px var(--rule); padding: 14px 12px; display: flex; flex-direction: column; gap: 8px; min-height: 390px; overflow: hidden; }
.telefono .tit { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--rule); font-size: 13.5px; font-weight: 600; }
.telefono .tit i { width: 26px; height: 26px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-style: normal; font-size: 12px; }
.telefono .tit small { display: block; font-weight: 400; color: var(--muted); font-size: 11.5px; }
.msg { max-width: 92%; background: var(--sheet); border-radius: 14px 14px 14px 4px; padding: 9px 11px; font-size: 13.5px; box-shadow: 0 1px 1px rgba(0,0,0,.04); opacity: 0; animation: entra .45s ease both; }
.msg.mio { align-self: flex-end; background: var(--ok-soft); border-radius: 14px 14px 4px 14px; }
.msg .onda { display: flex; gap: 3px; align-items: center; height: 20px; }
.msg .onda i { width: 3px; border-radius: 2px; background: var(--muted); display: block; animation: onda 1.1s ease-in-out infinite; }
.msg small { display: block; font-size: 11px; color: var(--muted); margin-top: 3px; text-align: right; }
.lavoro { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.lavoro .fase { font-size: 12.5px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--warm); }
.lavoro .capito, .lavoro .bozza-st, .lavoro .fatti { opacity: 0; animation: entra .5s ease both; }
.lavoro .capito { background: var(--paper); border-radius: 12px; padding: 12px 14px; font-size: 14.5px; }
.lavoro .capito ul { margin: 6px 0 0; padding-left: 18px; color: var(--muted); }
.lavoro .bozza-st { border: 1px solid var(--rule); border-radius: 12px; padding: 12px 14px; font-size: 14.5px; }
.lavoro .bozza-st .tasti-anim { margin-top: 10px; }
.lavoro .fatti { display: grid; gap: 6px; }
.lavoro .fatti div { display: flex; gap: 8px; align-items: center; font-size: 14px; background: var(--ok-soft); border-radius: 10px; padding: 8px 12px; opacity: 0; animation: entra .4s ease both; }
.lavoro .fatti div::before { content: "✓"; color: var(--ok); font-weight: 700; }

/* ---- Trades ---- */
.famiglie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.famiglia { background: var(--sheet); border: 1px solid var(--rule); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 12px; transition: transform .25s, box-shadow .25s; }
.famiglia:hover { transform: translateY(-3px); box-shadow: var(--ombra); }
.famiglia h3 { font: 600 21px var(--f-display); margin: 0; }
.famiglia .mestieri { display: flex; flex-wrap: wrap; gap: 6px; }
.famiglia .mestieri span { font-size: 13px; padding: 3px 10px; border-radius: 999px; background: var(--paper); }
.famiglia ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; font-size: 15px; color: var(--muted); }
.famiglia ul li { padding-left: 22px; position: relative; }
.famiglia ul li::before { content: ""; position: absolute; left: 0; top: 8px; width: 10px; height: 10px; border-radius: 3px; background: var(--accent-soft); box-shadow: inset 0 0 0 3px var(--accent); }
.segni { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.segno-c { background: var(--sheet); border: 1px solid var(--rule); border-radius: 14px; padding: 20px; }
.segno-c .icona { margin-bottom: 12px; }
.segno-c p { margin: 0; font-size: 15.5px; }
.confronto { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.confronto > div { border-radius: 16px; padding: 24px; border: 1px solid var(--rule); background: var(--sheet); }
.confronto .no li::before { content: "–"; color: var(--muted); }

/* ---- Getting started ---- */
.percorso { position: relative; display: grid; gap: 0; }
.percorso::before { content: ""; position: absolute; left: 27px; top: 28px; bottom: 28px; width: 2px; background: var(--rule); }
.percorso .linea-viva { position: absolute; left: 27px; top: 28px; width: 2px; height: 0; background: linear-gradient(var(--accent), #5FCB92); transition: height .2s linear; z-index: 1; }
.tappa { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 22px; padding: 0 0 34px; }
.tappa .num { width: 56px; height: 56px; border-radius: 50%; background: var(--sheet); border: 2px solid var(--rule); display: grid; place-items: center; font: 600 22px var(--f-display); color: var(--muted); z-index: 2; transition: all .4s ease; }
.tappa.vista .num { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.tappa .carta-t { background: var(--sheet); border: 1px solid var(--rule); border-radius: 16px; padding: 22px 24px; box-shadow: var(--ombra); }
.tappa .quando { display: inline-block; font-size: 12.5px; font-weight: 650; padding: 3px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); margin-bottom: 8px; }
.tappa h3 { font: 600 23px var(--f-display); margin: 0 0 6px; }
.tappa .chi-fa { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.tappa .chi-fa div { background: var(--paper); border-radius: 12px; padding: 12px 14px; font-size: 14.5px; }
.tappa .chi-fa b { display: block; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--warm); margin-bottom: 4px; }
.primo-giorno { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.contatore { background: var(--sheet); border: 1px solid var(--rule); border-radius: 16px; padding: 22px; }
.contatore b { display: block; font: 600 46px/1 var(--f-display); color: var(--accent); font-variant-numeric: tabular-nums; }
.contatore span { color: var(--muted); font-size: 15px; }
.serve { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.serve .carta h3 { font-size: 16.5px; }
.pilota { background: linear-gradient(135deg, var(--accent-soft), var(--ok-soft)); border-radius: 20px; padding: 32px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; align-items: center; }
.pilota h2 { margin-bottom: 8px; }
.pilota ul { margin: 0; }

@media (max-width: 860px) {
  .flusso, .storie, .palco, .famiglie, .confronto, .pilota { grid-template-columns: 1fr; }
  .pensiero { position: static; min-height: 0; }
  .schede-storie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .segni, .primo-giorno, .serve { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tappa .chi-fa { grid-template-columns: 1fr; }
  .telefono { min-height: 0; }
  .palco { min-height: 0; padding: 14px; }
}
.flusso > *, .storie > *, .palco > *, .famiglie > *, .confronto > *, .pilota > *, .segni > *, .serve > * { min-width: 0; }
@media (prefers-reduced-motion: reduce) {
  .nastro .scorre, .schede-storie button .barretta, .pensiero .testa .vivo { animation: none !important; }
  .msg, .lavoro .capito, .lavoro .bozza-st, .lavoro .fatti, .lavoro .fatti div, .pensiero .righe div { animation: none !important; opacity: 1; }
}

/* ---- Rotating trade in a heading ---- */
.ruota { display: inline-block; color: var(--accent); transition: opacity .35s ease, transform .35s ease; }
.ruota.esce { opacity: 0; transform: translateY(-10px); }

/* ---- Before and after Alfred ---- */
.giornate { max-width: 980px; }
.interruttore { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; background: var(--paper); border: 1px solid var(--rule); border-radius: 999px; padding: 4px; margin-bottom: 26px; }
.interruttore button { position: relative; z-index: 1; border: 0; background: none; font: 600 15px var(--f-body); padding: 9px 22px; border-radius: 999px; cursor: pointer; color: var(--muted); transition: color .3s; }
.interruttore button[aria-checked="true"] { color: var(--accent-ink); }
.interruttore .cursore { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: var(--ink); transition: transform .45s cubic-bezier(.4,0,.2,1), background .45s; }
.giornate.con-alfred .interruttore .cursore { transform: translateX(100%); background: var(--accent); }
.ore-giorno { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ore-giorno > li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 18px; align-items: start; background: var(--sheet); border: 1px solid var(--rule); border-radius: 16px; padding: 18px 22px; transition: border-color .45s; }
section.chiara .ore-giorno > li { background: var(--paper); }
.ore-giorno .h { font: 600 22px var(--f-display); color: var(--warm); transition: color .45s; padding-top: 2px; }
.pannelli { display: grid; }
.pannelli > div { grid-area: 1 / 1; transition: opacity .4s ease, visibility .4s; }
.pannelli h4 { margin: 0 0 10px; font-size: 16.5px; }
.giornate:not(.con-alfred) .con, .giornate.con-alfred .senza { opacity: 0; visibility: hidden; }
/* Without Alfred: a chain of steps you do, one after the other. */
.catena { list-style: none; margin: 0; padding: 0 0 0 20px; display: grid; gap: 7px; position: relative; }
.catena::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 2px; background: repeating-linear-gradient(var(--rule) 0 4px, transparent 4px 8px); }
.catena li { position: relative; color: var(--muted); font-size: 15.5px; }
.catena li::before { content: ""; position: absolute; left: -19px; top: 7px; width: 10px; height: 10px; border-radius: 50%; background: var(--sheet); box-shadow: inset 0 0 0 2px var(--warm); }
.catena li:last-child { color: var(--ink); font-weight: 550; }
.catena li:last-child::before { background: var(--warm); }
/* With Alfred: the steps it does by itself tick in, then what is left for you. */
.auto { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.auto li { display: inline-flex; align-items: center; gap: 7px; font-size: 14.5px; padding: 6px 12px 6px 8px; border-radius: 999px; background: var(--ok-soft); color: var(--ink); }
.auto li::before { content: "✓"; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--ok); color: #fff; font-size: 11px; font-weight: 700; }
.tu { margin: 0; font-size: 15.5px; }
.tu b { color: var(--accent); }
.catena li, .auto li, .tu { opacity: 0; transform: translateY(6px); transition: opacity .35s ease, transform .35s ease; transition-delay: calc(var(--i, 0) * 110ms + 150ms); }
.giornate:not(.con-alfred) .catena li, .giornate.con-alfred .auto li, .giornate.con-alfred .tu { opacity: 1; transform: none; }
.giornate.con-alfred .ore-giorno > li { border-color: color-mix(in srgb, var(--ok) 40%, var(--rule)); }
.giornate.con-alfred .ore-giorno .h { color: var(--ok); }
.bilancio { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.bilancio div { background: var(--ink); color: #F4F2EE; border-radius: 14px; padding: 16px 18px; transition: background .45s; }
.giornate.con-alfred .bilancio div { background: var(--ok); }
.bilancio b { display: block; font: 600 36px/1 var(--f-display); font-variant-numeric: tabular-nums; margin-bottom: 4px; }
.bilancio span { font-size: 14px; opacity: .85; }
@media (prefers-color-scheme: dark) { .bilancio div { background: #0C1015; border: 1px solid var(--rule); } .giornate.con-alfred .bilancio div { background: #1F5A3C; } }
@media (max-width: 860px) { .ore-giorno > li { grid-template-columns: 1fr; gap: 6px; } .bilancio { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .catena li, .auto li, .tu { transition: none !important; } }
.vedi-storia { margin-top: auto; align-self: flex-start; border: 0; background: none; color: var(--accent); font: 600 15px var(--f-body); padding: 4px 0; cursor: pointer; }
.vedi-storia:hover { text-decoration: underline; }
.avviso-pro { display: flex; gap: 16px; align-items: flex-start; margin-top: 22px; background: var(--sheet); border: 1px dashed var(--rule); border-radius: 14px; padding: 18px 20px; }
.avviso-pro .icona { flex: none; margin: 0; }
.avviso-pro p { margin: 0; color: var(--muted); font-size: 15.5px; }
.avviso-pro b { color: var(--ink); }

/* ---- Section index (Come funziona) ---- */
.indice { position: sticky; top: 64px; z-index: 4; background: color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--rule); }
.indice .contenitore { display: flex; gap: 6px; overflow-x: auto; padding-top: 10px; padding-bottom: 10px; scrollbar-width: none; }
.indice a { flex: none; font-size: 14px; color: var(--muted); text-decoration: none; padding: 6px 13px; border-radius: 999px; transition: background .25s, color .25s; }
.indice a:hover { color: var(--ink); }
.indice a.attiva { background: var(--ink); color: var(--paper); }
section[id] { scroll-margin-top: 120px; }

/* ---- The week: free times found in the calendar ---- */
.settimana { background: var(--sheet); border: 1px solid var(--rule); border-radius: 18px; box-shadow: var(--ombra); padding: 18px; position: relative; overflow: hidden; }
.settimana .giorni { display: grid; grid-template-columns: 34px repeat(5, minmax(0, 1fr)); gap: 6px; }
.settimana .gtit { font-size: 12.5px; font-weight: 650; text-align: center; color: var(--muted); padding-bottom: 6px; }
.settimana .ore { display: grid; grid-template-rows: repeat(9, 26px); font-size: 11px; color: var(--muted); }
.settimana .col { position: relative; height: 234px; border-radius: 8px; background: repeating-linear-gradient(var(--paper) 0 25px, var(--rule) 25px 26px); }
.settimana .col > span { position: absolute; left: 3px; right: 3px; border-radius: 6px; font-size: 11px; padding: 3px 6px; line-height: 1.25; overflow: hidden; opacity: 0; transform: scale(.92); transition: opacity .35s ease, transform .35s ease; }
.settimana .occ { background: color-mix(in srgb, var(--muted) 22%, transparent); color: var(--muted); }
.settimana .lib { background: var(--ok-soft); color: var(--ok); font-weight: 700; white-space: nowrap; box-shadow: inset 0 0 0 1.5px var(--ok); }
.settimana .col > span.su { opacity: 1; transform: none; }
.settimana .scansione { position: absolute; top: 46px; bottom: 74px; left: 52px; width: 2px; background: var(--accent); box-shadow: 0 0 14px var(--accent); opacity: 0; }
.settimana.scansiona .scansione { animation: scansiona 1.5s ease-in-out both; }
@keyframes scansiona { 0% { opacity: 0; left: 52px; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; left: calc(100% - 20px); } }
.msg-orari { margin-top: 14px; background: var(--ok-soft); border-radius: 14px 14px 4px 14px; padding: 11px 14px; font-size: 14.5px; margin-left: auto; max-width: 92%; opacity: 0; transform: translateY(8px); transition: opacity .45s ease, transform .45s ease; }
.msg-orari.su { opacity: 1; transform: none; }
.msg-orari small { display: block; color: var(--muted); font-size: 12px; margin-bottom: 3px; }

/* ---- Asking with the voice ---- */
.voce-demo { background: var(--ink); color: #F4F2EE; border-radius: 18px; padding: 22px; box-shadow: var(--ombra); display: grid; gap: 14px; }
@media (prefers-color-scheme: dark) { .voce-demo { background: #0C1015; border: 1px solid var(--rule); } }
.voce-demo .riga-mic { display: flex; align-items: center; gap: 14px; }
.voce-demo .mic { width: 52px; height: 52px; border-radius: 50%; background: #2447C9; display: grid; place-items: center; flex: none; transition: box-shadow .3s; }
.voce-demo .mic svg { width: 24px; height: 24px; color: #fff; }
.voce-demo.ascolta .mic { animation: ascolta 1.4s ease-in-out infinite; }
@keyframes ascolta { 0%, 100% { box-shadow: 0 0 0 0 rgba(36, 71, 201, .55); } 50% { box-shadow: 0 0 0 14px rgba(36, 71, 201, 0); } }
.voce-demo .onda-voce { display: flex; gap: 3px; align-items: center; height: 30px; flex: 1; opacity: .35; transition: opacity .3s; }
.voce-demo.ascolta .onda-voce { opacity: 1; }
.voce-demo .onda-voce i { width: 3px; height: 8px; border-radius: 2px; background: #9FB4FF; display: block; }
.voce-demo.ascolta .onda-voce i { animation: onda 1s ease-in-out infinite; }
.voce-demo .parlato { min-height: 3.1em; font: 500 18px/1.45 var(--f-display); }
.voce-demo .parlato:empty::before { content: "Ti ascolto…"; color: rgba(244, 242, 238, .45); }
.risposta-voce { background: rgba(244, 242, 238, .08); border-radius: 12px; padding: 13px 15px; font-size: 15px; opacity: 0; transform: translateY(8px); transition: opacity .45s ease, transform .45s ease; }
.risposta-voce.su { opacity: 1; transform: none; }
.risposta-voce .guardato { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.risposta-voce .guardato span { font-size: 12px; padding: 2px 9px; border-radius: 999px; background: rgba(244, 242, 238, .1); color: rgba(244, 242, 238, .75); }

/* ---- Connections: today and coming ---- */
.collegamenti-sito { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.collegamento { background: var(--sheet); border: 1px solid var(--rule); border-radius: 14px; padding: 18px 20px; }
section.chiara .collegamento { background: var(--paper); }
.collegamento h3 { font-size: 16px; margin-bottom: 8px; }
.collegamento ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 15px; }
.collegamento li { display: flex; justify-content: space-between; gap: 10px; }
.collegamento .stato { font-size: 12px; font-weight: 650; padding: 2px 9px; border-radius: 999px; white-space: nowrap; align-self: center; }
.collegamento .stato.oggi { background: var(--ok-soft); color: var(--ok); }
.presto-tag { display: inline-block; font-size: 12px; font-weight: 650; line-height: 1.5; padding: 1px 9px; border-radius: 999px; white-space: nowrap; vertical-align: 1px; background: color-mix(in srgb, var(--warm) 14%, transparent); color: var(--warm); }
.collegamento .stato.presto { background: var(--accent-soft); color: var(--accent); }

@media (max-width: 860px) {
  .collegamenti-sito { grid-template-columns: 1fr; }
  .settimana .giorni { grid-template-columns: 26px repeat(5, minmax(0, 1fr)); gap: 4px; }
  .settimana .col > span { font-size: 10px; padding: 2px 3px; }
}
.collegamenti-sito > *, .ore-giorno > li > * { min-width: 0; }
@media (prefers-reduced-motion: reduce) {
  .ruota, .settimana .col > span, .msg-orari, .risposta-voce { transition: none !important; }
  .voce-demo .mic, .voce-demo .onda-voce i, .settimana .scansione { animation: none !important; }
}

/* ===== Alfred lines: the whole site takes the look of the line the visitor chose (Prodotti). =====
   html[data-linea] picks the line, html[data-sfondo] the background (scuro, chiaro, carta), and an
   inline --accent the colour the visitor picked. Without a choice the site keeps its classic look. */
html[data-linea] body { transition: background-color .5s, color .5s; }
html[data-linea] { --accent-soft: color-mix(in srgb, var(--accent) 16%, var(--paper)); }
html[data-linea] .ok-soft, html[data-linea] .etichetta.verde { background: color-mix(in srgb, var(--ok) 16%, var(--paper)); }

/* Tecnico: technical drawing. */
html[data-linea="tecnico"] { --f-display: "Avenir Next Condensed", "Helvetica Neue", "Arial Narrow", system-ui, sans-serif; --f-body: "Avenir Next", system-ui, sans-serif; --r: 4px; --warm: #FF7A2F; --ok: #9BE37A; }
html[data-linea="tecnico"][data-sfondo="scuro"] { --paper: #0A0C0A; --sheet: #121512; --ink: #E8EBE4; --muted: #9AA394; --rule: #2C3229; --accent: #C6FF3D; --accent-ink: #0A0C0A; color-scheme: dark; }
html[data-linea="tecnico"][data-sfondo="chiaro"] { --paper: #F1F2EE; --sheet: #FFFFFF; --ink: #121512; --muted: #59614F; --rule: #D6DACF; --accent: #3F6B0A; --accent-ink: #FFFFFF; --ok: #2F7A2A; --warm: #D3561A; }
html[data-linea="tecnico"][data-sfondo="scuro"] body, html[data-linea="tecnico"][data-sfondo="chiaro"] body {
  background-image: linear-gradient(color-mix(in srgb, var(--ink) 6%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--ink) 6%, transparent) 1px, transparent 1px);
  background-size: 32px 32px; }
html[data-linea="tecnico"] h1, html[data-linea="tecnico"] h2 { text-transform: uppercase; letter-spacing: -0.01em; font-weight: 700; }
html[data-linea="tecnico"] .occhiello { font-family: ui-monospace, Menlo, monospace; }

/* Affari: aurora. */
html[data-linea="affari"] { --f-display: "Avenir Next", system-ui, sans-serif; --f-body: system-ui, -apple-system, sans-serif; --r: 14px; --warm: #22D3EE; --ok: #34D9A8; }
html[data-linea="affari"][data-sfondo="scuro"] { --paper: #07080F; --sheet: #11132A; --ink: #EEF0FF; --muted: #A3A8CC; --rule: #262A4A; --accent: #7C7FFF; --accent-ink: #FFFFFF; color-scheme: dark; }
html[data-linea="affari"][data-sfondo="chiaro"] { --paper: #F5F6FF; --sheet: #FFFFFF; --ink: #141633; --muted: #5A5F86; --rule: #DDE0F5; --accent: #5048E5; --accent-ink: #FFFFFF; --warm: #0E8FA8; }
html[data-linea="affari"][data-sfondo="scuro"] body { background-image: radial-gradient(900px 600px at 90% -5%, rgba(99,102,241,.32), transparent 60%), radial-gradient(700px 520px at 0% 100%, rgba(34,211,238,.12), transparent 60%); background-attachment: fixed; }
html[data-linea="affari"] h1 { letter-spacing: -0.035em; }

/* Agenda: pearl. */
html[data-linea="agenda"] { --f-display: ui-rounded, "SF Pro Rounded", "Avenir Next", system-ui, sans-serif; --f-body: ui-rounded, "SF Pro Rounded", system-ui, sans-serif; --r: 22px; --warm: #D9487A; --ok: #16A06A; }
html[data-linea="agenda"][data-sfondo="chiaro"] { --paper: #F6F5FB; --sheet: #FFFFFF; --ink: #1E1B3A; --muted: #6E6A8C; --rule: #E4E0F2; --accent: #7C6CF6; --accent-ink: #FFFFFF; }
html[data-linea="agenda"][data-sfondo="scuro"] { --paper: #15132A; --sheet: #1E1B3A; --ink: #F1EEFF; --muted: #B4AED6; --rule: #322E55; --accent: #A99BFF; --accent-ink: #15132A; --warm: #FF8FB1; color-scheme: dark; }
html[data-linea="agenda"][data-sfondo="chiaro"] body { background-image: radial-gradient(800px 600px at 95% 0%, rgba(255,143,177,.22), transparent 60%), radial-gradient(800px 600px at 0% 100%, rgba(111,211,247,.22), transparent 60%); background-attachment: fixed; }
html[data-linea="agenda"] .pulsante, html[data-linea="agenda"] .schermo { border-radius: 22px; }

/* Ultra: black and gold. */
html[data-linea="ultra"] { --f-display: "Didot", "Bodoni 72", ui-serif, Georgia, serif; --f-body: system-ui, -apple-system, sans-serif; --r: 12px; --warm: #E6C67A; --ok: #9BE37A; }
html[data-linea="ultra"][data-sfondo="scuro"] { --paper: #050505; --sheet: #121110; --ink: #F5F1E6; --muted: #B9B09A; --rule: #2E2A20; --accent: #E6C67A; --accent-ink: #050505; color-scheme: dark; }
html[data-linea="ultra"][data-sfondo="chiaro"] { --paper: #FBF8F1; --sheet: #FFFFFF; --ink: #1A1710; --muted: #6B6352; --rule: #E7DFCC; --accent: #8F6E22; --accent-ink: #FFFFFF; --warm: #8F6E22; }
html[data-linea="ultra"][data-sfondo="scuro"] body { background-image: radial-gradient(1000px 520px at 50% -12%, rgba(230,198,122,.18), transparent 65%), radial-gradient(600px 400px at 100% 100%, rgba(124,127,255,.14), transparent 60%); background-attachment: fixed; }

/* «Carta»: the classic warm paper, with the line's colour and type. */
html[data-linea][data-sfondo="carta"] { --paper: #F4F2EE; --sheet: #FFFFFF; --ink: #17202B; --muted: #5D6873; --rule: #DDD8CF; color-scheme: light; }
html[data-linea="tecnico"][data-sfondo="carta"] { --accent: #3F6B0A; --accent-ink: #FFFFFF; }
html[data-linea="affari"][data-sfondo="carta"] { --accent: #5048E5; --accent-ink: #FFFFFF; }
html[data-linea="agenda"][data-sfondo="carta"] { --accent: #7C6CF6; --accent-ink: #FFFFFF; }
html[data-linea="ultra"][data-sfondo="carta"] { --accent: #8F6E22; --accent-ink: #FFFFFF; }
html[data-linea] header.alto { background: color-mix(in srgb, var(--paper) 86%, transparent); }

/* The small bar that says which line the visitor is looking at. */
.barra-linea { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 20; display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px; border-radius: 999px;
  background: var(--sheet); color: var(--ink); box-shadow: var(--ombra); border: 1px solid var(--rule); font-size: 14px; white-space: nowrap; }
.barra-linea img { width: 24px; height: 24px; }
.barra-linea a, .barra-linea button { font: 600 13px var(--f-body); color: var(--accent); background: none; border: 0; cursor: pointer; padding: 6px 8px; text-decoration: none; }
@media (max-width: 560px) { .barra-linea { font-size: 12.5px; gap: 4px; } .barra-linea .lungo { display: none; } }

/* Prodotti page. */
.linee-scelta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 30px; }
@media (max-width: 900px) { .linee-scelta { grid-template-columns: 1fr 1fr; } }
.linea-carta { text-align: left; cursor: pointer; border-radius: 18px; padding: 20px; border: 2px solid transparent; display: flex; flex-direction: column; gap: 10px; min-height: 250px; font: inherit; transition: transform .2s, border-color .2s, box-shadow .2s; }
.linea-carta:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0,0,0,.18); }
.linea-carta[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 30%, transparent); }
.linea-carta img { width: 56px; height: 56px; }
.linea-carta .gruppo { font: 600 11.5px ui-monospace, Menlo, monospace; letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
.linea-carta b { font-size: 21px; line-height: 1.15; }
.linea-carta span.desc { font-size: 14px; line-height: 1.45; opacity: .85; }
.linea-carta.tecnico { background: #0A0C0A; color: #E8EBE4; border-radius: 6px; }
.linea-carta.affari { background: radial-gradient(300px 200px at 90% 0%, rgba(99,102,241,.45), transparent 70%), #07080F; color: #EEF0FF; }
.linea-carta.agenda { background: linear-gradient(160deg, #fff, #F1EEFF); color: #1E1B3A; border-radius: 26px; }
.linea-carta.ultra { background: radial-gradient(300px 200px at 50% -10%, rgba(230,198,122,.3), transparent 70%), #050505; color: #F5F1E6; }
.linea-dettaglio { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; margin-top: 10px; }
@media (max-width: 900px) { .linea-dettaglio { grid-template-columns: 1fr; } }
.linea-dettaglio .nome-linea { display: flex; align-items: center; gap: 16px; }
.linea-dettaglio .nome-linea img { width: 72px; height: 72px; }
.linea-dettaglio .nome-linea h2 { margin: 0; }
.elenco-linea { list-style: none; padding: 0; margin: 18px 0; display: grid; gap: 10px; }
.elenco-linea li { padding-left: 28px; position: relative; }
.elenco-linea li::before { content: ""; position: absolute; left: 0; top: .45em; width: 14px; height: 14px; border-radius: 4px; background: var(--accent); }
.personalizza { margin-top: 18px; padding: 18px; border-radius: var(--r); background: var(--sheet); border: 1px solid var(--rule); display: grid; gap: 14px; }
.personalizza .riga { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.personalizza .riga > span { font-size: 14px; color: var(--muted); min-width: 64px; }
.sceglie { font: 600 13.5px var(--f-body); padding: 8px 14px; border-radius: 999px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); cursor: pointer; }
.sceglie[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.colore { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--paper); box-shadow: 0 0 0 1px var(--rule); cursor: pointer; }
.colore[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--accent), 0 0 0 4px var(--paper); }
.tabella-linee { width: 100%; border-collapse: collapse; font-size: 15px; margin-top: 20px; }
.tabella-linee th, .tabella-linee td { text-align: left; vertical-align: top; padding: 12px; border-bottom: 1px solid var(--rule); }
.tabella-linee th { font-size: 13px; color: var(--muted); }
.tabella-scorre { overflow-x: auto; }
/* Hidden stays hidden, whatever display a block has. */
[hidden] { display: none !important; }