/* Pagine interne nell'impianto Timeline.
   Ordine di caricamento: haemolaser.css (componenti) → tl.css (sistema Timeline) → questo file,
   che ritraduce i componenti interni nei token Timeline senza toccare i contenuti. */

:root{
  --lino:#FFFFFC; --carta:#FFFFFC; --vena:#292923;
  --vena-70:rgba(41,41,35,.74); --vena-50:rgba(0,0,0,.56); --vena-20:#E2E2DA;
  --rosso:var(--wl); --rosso-scuro:#9E0C24; --viola-scuro:#3A24B8;
  --ematico:#16120F; --ematico-2:#16120F; --notte:#16120F; --notte-2:#16120F;
  --siero:#F3F3EC; --siero-2:#F3F3EC; --sabbia:#F3F3EC;
  --r-pan:12px; --r-card:8px; --r-pill:4px; --gutter:10px;
  --fd:"Geist",system-ui,sans-serif; --fx:"Geist",system-ui,sans-serif; --fs:"Newsreader",Georgia,serif;
}
@media (min-width:900px){:root{--gutter:10px}}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px}
::selection{background:var(--wl);color:#fff}

/* titoli: scala Timeline */
h1,h2,h3,h4{font-family:var(--sans);letter-spacing:-.02em}
h1{font-size:clamp(34px,3.6vw,52px);font-weight:400;line-height:1.08;letter-spacing:-.025em;hyphens:manual}
h2{font-size:clamp(28px,3.2vw,46px);font-weight:400;line-height:1.1;letter-spacing:-.025em}
h3{font-size:clamp(20px,1.9vw,26px);font-weight:400;line-height:1.2}
h4{font-size:17px;font-weight:500;line-height:1.3;letter-spacing:0}
.opener h2{font-size:clamp(30px,3.6vw,52px);font-weight:400;max-width:20ch}

/* lettura: serif Newsreader come i paragrafi Timeline */
.lead{font-family:var(--serif);font-size:clamp(18px,1.46vw,21px);line-height:1.38;color:var(--ink);max-width:36em}
.prose{font-family:var(--serif);font-size:19px;line-height:1.5;max-width:700px}
.prose h2,.prose h3,.prose h4{font-family:var(--sans)}
.prose a{text-decoration-color:var(--line)}
.prose blockquote{border-left:0;padding:0;font-style:normal;font-size:clamp(22px,2.2vw,30px);line-height:1.3;font-weight:300;color:var(--ink)}
.prose sup{color:var(--wl);font-family:var(--sans)}
.small{font-size:14px;color:var(--ink-2)}

/* etichette: microetichette Timeline */
.chap,.kicker,.crumb{font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:1.08px;text-transform:uppercase;color:var(--ink-2)}
.chap::after{display:none}
.kicker{color:var(--wl)}
.crumb{margin-bottom:18px}
.crumb a:hover{color:var(--wl)}

/* pannelli */
.pan{border-radius:12px;margin:0 var(--edge);padding:96px 0;background:var(--bg)}
.pan+.pan{margin-top:0}
.pan--lino{background:transparent}
.pan--siero,.pan--sabbia{background:var(--panel)}
.pan--siero + .pan--siero,.pan--sabbia + .pan--sabbia,.pan--siero + .pan--sabbia,.pan--sabbia + .pan--siero{margin-top:10px}
.pan--dark,.pan--notte{background:var(--dark);color:#F3F1EA}
.pan--glow{background:#24090E;color:#F3F1EA}
.pan--blue{background:#14112E;color:#F3F1EA}
.pan--dark,.pan--notte,.pan--glow,.pan--blue{margin-top:10px;margin-bottom:10px}
.pan--dark .chap,.pan--notte .chap,.pan--glow .chap,.pan--blue .chap,.pan--dark .crumb,.pan--notte .crumb{color:rgba(243,241,234,.66)}
.pan--dark .lead,.pan--notte .lead,.pan--glow .lead,.pan--blue .lead{color:#F3F1EA}
.pan--glow .kicker{color:#FF6A78}.pan--blue .kicker{color:#A99BFF}
.pan--tight{padding:56px 0}
@media (max-width:900px){.pan{padding:64px 0}.pan--tight{padding:40px 0}}

/* note: riquadri a fondo tinto, etichetta in maiuscoletto */
.note{background:var(--panel);border:0;border-radius:8px;font-family:var(--sans);font-size:15px;line-height:1.5}
.pan--siero .note,.pan--sabbia .note{background:#fff}
.note strong{font-size:11px;letter-spacing:1px;color:var(--ink-2)}
.note--prod strong{color:var(--wl)}
.note--ev strong{color:#3A24B8}
.note--stop{background:transparent;border:1px solid var(--line)}
.pan--dark .note,.pan--notte .note,.pan--glow .note,.pan--blue .note{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);color:#F3F1EA}
.pan--dark .note strong,.pan--notte .note strong{color:rgba(243,241,234,.72)}

/* card */
.card{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:24px}
.pan--siero .card,.pan--sabbia .card{background:#fff;border-color:transparent}
.card--lino{background:var(--panel);border-color:transparent}
.card h3{font-size:20px;font-weight:500;margin:0 0 8px}
.card p{font-size:15px;color:var(--ink-2)}
.card__k{font-weight:400;letter-spacing:-.025em}
.card--dark,.pan--dark .card,.pan--notte .card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);color:#F3F1EA}
.card--dark p,.pan--dark .card p,.pan--notte .card p{color:rgba(243,241,234,.74)}

/* tabelle */
.tbl{font-family:var(--sans);font-size:14px}
.tbl th{font-size:11px;font-weight:500;letter-spacing:.9px;text-transform:uppercase;color:var(--ink-2)}
.tbl th,.tbl td{border-color:var(--line)}
.pan--dark .tbl th,.pan--dark .tbl td,.pan--notte .tbl th,.pan--notte .tbl td{border-color:rgba(255,255,255,.14)}

/* badge evidenza, tag, passi, liste a filetto */
.ev i b{border-radius:1px;height:5px}
.tag{border-radius:4px;font-size:11px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;padding:4px 8px;background:var(--panel);color:var(--ink)}
.tag--rosso{background:var(--wl);color:#fff}
.tag--viola{background:#5B3DF5;color:#fff}
.steps li::before{color:var(--wl);font-weight:400;font-size:20px}
.steps li,.ruled li{border-color:var(--line)}
.toc a{font-weight:400}
.toc--light li{border-color:var(--line)}
.refs{font-size:14px}
.refs li::before{color:var(--wl)}

/* FAQ: righe a filetto con «+», come Timeline */
.faq-list{display:grid;gap:0;max-width:880px}
.faq-list details{background:transparent!important;border:0!important;border-bottom:1px solid var(--line)!important;border-radius:0!important;padding:0!important}
.faq-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0 12px;font-size:18px;font-weight:400;line-height:1.35}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";font-weight:300;font-size:22px;line-height:1;color:var(--ink-2);transition:transform .25s var(--ease);flex:none}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list .a{font-family:var(--serif);font-size:18px;line-height:1.45;color:var(--ink);padding:0 0 18px;max-width:64ch}
.pan--dark .faq-list details,.pan--notte .faq-list details{border-color:rgba(255,255,255,.14)!important}
.pan--dark .faq-list .a,.pan--notte .faq-list .a{color:rgba(243,241,234,.8)}

/* bottoni: tutte le varianti ricondotte al bottone Timeline */
.btn{border-radius:var(--r-sm);transform:none!important;white-space:normal}
.btn--rosso{background:var(--wl);border-color:var(--wl);color:#fff}
.btn--rosso:hover{background:transparent;color:var(--wl)}
.btn--ghost{background:transparent;border-color:currentColor;color:inherit;opacity:1}
.btn--ghost:hover{background:var(--ink);color:var(--bg)}
.pan--dark .btn--ghost:hover,.pan--notte .btn--ghost:hover,.pan--glow .btn--ghost:hover,.pan--blue .btn--ghost:hover{background:#fff;color:var(--ink)}
.btn--chiaro{background:var(--bg);border-color:var(--bg);color:var(--ink)}
.btn--chiaro:hover{background:transparent;color:var(--bg)}
.btn--sm{padding:9px 14px}
.pan--dark .btn:not(.btn--chiaro):not(.btn--rosso),.pan--notte .btn:not(.btn--chiaro):not(.btn--rosso){border-color:rgba(243,241,234,.7);color:#F3F1EA}

/* hero delle pagine interne: pannello Timeline con foto a destra */
.hero-int{display:grid;grid-template-columns:7fr 5fr;padding:0!important;background:var(--panel)!important;overflow:hidden;min-height:440px;margin-top:0}
.hero-int > .wrap{padding:64px 48px 56px;max-width:none;align-self:end}
.hero-int h1{max-width:16ch;margin-bottom:16px}
.hero-int .lead{margin-top:0}
.hero-int__fig{margin:0;position:relative;min-height:100%;background:#E9E8E0}
.hero-int__fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-int__fig--contain img{object-fit:contain;padding:8%}
.hero-int__fig figcaption{position:absolute;left:14px;bottom:12px;font-size:11px;font-weight:500;letter-spacing:.8px;text-transform:uppercase;background:var(--bg);color:var(--ink);padding:5px 8px;border-radius:4px}
.hero-int:not(:has(.hero-int__fig)){grid-template-columns:1fr;min-height:0}
@media (max-width:900px){
  .hero-int{grid-template-columns:1fr;min-height:0}
  .hero-int > .wrap{padding:36px 20px 32px}
  .hero-int__fig{min-height:0;aspect-ratio:4/3;order:-1}
}

/* sezioni interattive esistenti nel nuovo fondo */
.pan--notte .mec__stage{background:rgba(255,255,255,.03)}
.mec__wl button[aria-pressed="true"]{color:var(--dark)}

/* sicurezza contro gli sforamenti su mobile */
.split>*,.grid>*{min-width:0}
.tbl-wrap{max-width:100%}

/* aperture di capitolo: larghezza Timeline (titolo su 2 righe, testo su 4–5) */
.opener{max-width:820px}
.opener h2{max-width:24ch;text-wrap:balance}
.opener .lead,.opener p{max-width:62ch;margin-left:auto;margin-right:auto;font-family:var(--serif);font-size:clamp(17px,1.3vw,19px);line-height:1.45}

/* QA sistema/supporto */
/* colonna fonti: stessa microetichetta delle altre intestazioni, leggibile anche sui pannelli scuri */
.tbl th.src{font-size:11px}
.tbl td.src{font-size:13px;color:var(--ink-2)}
.pan--dark .tbl th,.pan--notte .tbl th,.pan--glow .tbl th,.pan--blue .tbl th,
.pan--dark .tbl .src,.pan--notte .tbl .src,.pan--glow .tbl .src,.pan--blue .tbl .src{color:rgba(243,241,234,.6)}
/* attributo hidden sempre rispettato anche dove il componente impone display */
.cfg [hidden],.sel [hidden],.faq-list [hidden]{display:none!important}
/* pannelli scuri (anche glow/blue): note, didascalie e microetichette mai scuro su scuro, niente filetto laterale colorato */
.pan--glow .small,.pan--blue .small,.pan--glow .muted,.pan--blue .muted{color:rgba(243,241,234,.66)}
.pan--glow .note strong,.pan--blue .note strong,.pan--dark .note--stop strong,.pan--notte .note--stop strong{color:rgba(243,241,234,.72)}
.pan--dark .note,.pan--notte .note,.pan--glow .note,.pan--blue .note{border:1px solid rgba(255,255,255,.12)!important;background:rgba(255,255,255,.06)}
/* citazione in pagina: il vecchio p.quote collideva con il blocco .quote (griglia 4fr/8fr) di tl.css e andava a capo parola per parola */
p.quote{display:block;font-family:var(--serif);font-weight:300;letter-spacing:-.005em}
/* FAQ su pannello scuro: il «+» restava inchiostro su nero */
.pan--dark .faq-list summary::after,.pan--notte .faq-list summary::after{color:rgba(243,241,234,.6)}

/* QA tecnologia/scienza */
/* <strong> di enfasi dentro una nota: solo il primo è l'etichetta maiuscola, gli altri restano grassetto in linea */
.note strong:not(.note > strong:first-child){display:inline;margin:0;font-size:inherit;font-weight:600;letter-spacing:0;text-transform:none;color:inherit}
/* stat card: l'unità piccola va a capo in blocco, non con l'interlinea del numero da 48 px */
.card__k small{display:inline-block;line-height:1.25;vertical-align:baseline}
/* badge di evidenza sui pannelli scuri: tacche monocrome come Timeline, non arancio/azzurro del vecchio sistema */
.pan--dark .ev i b,.pan--notte .ev i b,.pan--glow .ev i b,.pan--blue .ev i b{background:rgba(255,255,255,.18)}
.pan--dark .ev[data-l="4"] i b:nth-child(-n+4),.pan--dark .ev[data-l="3"] i b:nth-child(-n+3),.pan--dark .ev[data-l="2"] i b:nth-child(-n+2),.pan--dark .ev[data-l="1"] i b:nth-child(1),
.pan--notte .ev[data-l="4"] i b:nth-child(-n+4),.pan--notte .ev[data-l="3"] i b:nth-child(-n+3),.pan--notte .ev[data-l="2"] i b:nth-child(-n+2),.pan--notte .ev[data-l="1"] i b:nth-child(1),
.pan--glow .ev[data-l="4"] i b:nth-child(-n+4),.pan--glow .ev[data-l="3"] i b:nth-child(-n+3),.pan--glow .ev[data-l="2"] i b:nth-child(-n+2),.pan--glow .ev[data-l="1"] i b:nth-child(1),
.pan--blue .ev[data-l="4"] i b:nth-child(-n+4),.pan--blue .ev[data-l="3"] i b:nth-child(-n+3),.pan--blue .ev[data-l="2"] i b:nth-child(-n+2),.pan--blue .ev[data-l="1"] i b:nth-child(1){background:#F3F1EA}
/* FAQ su glow/blue e filetti delle righe sui pannelli scuri */
.pan--glow .faq-list summary::after,.pan--blue .faq-list summary::after{color:rgba(243,241,234,.6)}
.pan--dark .faq-list details,.pan--notte .faq-list details,.pan--glow .faq-list details,.pan--blue .faq-list details{border-color:rgba(255,255,255,.14)!important}