@font-face{font-family:'Newsreader';src:url('/static/fonts/Newsreader-latin.woff2') format('woff2');
  font-weight:200 800;font-display:swap;font-style:normal}
@font-face{font-family:'Newsreader';src:url('/static/fonts/Newsreader-latin-italic.woff2') format('woff2');
  font-weight:200 800;font-display:swap;font-style:italic}
@font-face{font-family:'InterVar';src:url('/static/fonts/Inter-latin.woff2') format('woff2');
  font-weight:100 900;font-display:swap;font-style:normal}
@font-face{font-family:'JetBrains Mono';src:url('/static/fonts/JetBrainsMono-latin.woff2') format('woff2');
  font-weight:100 800;font-display:swap;font-style:normal}

/* ---------- scripts the self-hosted faces do not cover -------------------
   Newsreader, Inter and JetBrains Mono are served as latin subsets, so on the
   Russian, Chinese and Japanese landings the browser would substitute glyph by
   glyph and those pages would end up set in three typefaces at once. Naming one
   stack per script makes them consistently the system's rather than
   accidentally a collage. */
html[lang="ru"] body{font-family:'InterVar','Segoe UI',system-ui,sans-serif}
html[lang="ru"] h1,html[lang="ru"] h2,html[lang="ru"] h3,html[lang="ru"] .sommario{
  font-family:Georgia,'Times New Roman',serif;font-weight:500;letter-spacing:0}
html[lang="zh"] body{font-family:'InterVar','PingFang SC','Microsoft YaHei',
  'Hiragino Sans GB',system-ui,sans-serif}
html[lang="zh"] h1,html[lang="zh"] h2,html[lang="zh"] h3,html[lang="zh"] .sommario{
  font-family:'Songti SC','Noto Serif SC','Source Han Serif SC',serif;font-weight:600;
  letter-spacing:.01em;line-height:1.3}
html[lang="ja"] body{font-family:'InterVar','Hiragino Sans','Yu Gothic','Noto Sans JP',
  system-ui,sans-serif}
html[lang="ja"] h1,html[lang="ja"] h2,html[lang="ja"] h3,html[lang="ja"] .sommario{
  font-family:'Hiragino Mincho ProN','Yu Mincho','Noto Serif JP',serif;font-weight:600;
  letter-spacing:.01em;line-height:1.34}
html[lang="zh"] h1,html[lang="ja"] h1{font-size:clamp(1.95rem,4.2vw,3.3rem)}

/* ---------- rhythm ---------------------------------------------------- */
.shell{width:var(--shell);margin-inline:auto}
.rule{border:0;border-top:1px solid var(--linea);margin:0}
.rule-forte{border:0;border-top:1px solid var(--linea-forte);margin:0}
section{scroll-margin-top:6rem}

/* ---------- type ------------------------------------------------------ */
h1,h2,h3,h4{font-family:var(--serif);font-weight:420;letter-spacing:-.012em;
  line-height:1.06;margin:0;text-wrap:balance;font-variation-settings:'opsz' 44}
h1{font-size:clamp(2.55rem,6.2vw,5.1rem);line-height:1.02;font-variation-settings:'opsz' 72}
/* Headlines written for search run long. At the display size a hundred
   character title fills the first screen by itself, so it steps down twice. */
h1.lungo{font-size:clamp(2rem,3.9vw,3.3rem);line-height:1.08;font-variation-settings:'opsz' 40}
h1.lunghissimo{font-size:clamp(1.7rem,2.8vw,2.45rem);line-height:1.16;
  font-variation-settings:'opsz' 28;max-width:26ch}
h2{font-size:clamp(1.85rem,3.6vw,3.05rem)}
h3{font-size:clamp(1.28rem,2vw,1.72rem);line-height:1.18;font-variation-settings:'opsz' 24}
h4{font-size:1.09rem;line-height:1.3;font-variation-settings:'opsz' 18}
p{margin:0 0 1.05em}
.occhiello{font-family:var(--mono);font-size:.685rem;letter-spacing:.19em;
  text-transform:uppercase;color:var(--inchiostro-3);font-weight:500;display:block}
.occhiello .num{color:var(--oro-testo)}
.sommario{font-family:var(--serif);font-size:clamp(1.12rem,1.7vw,1.42rem);
  line-height:1.48;color:var(--inchiostro-2);font-variation-settings:'opsz' 20;
  font-weight:350;max-width:62ch}
.piccolo{font-size:.86rem;color:var(--inchiostro-3);line-height:1.5}

/* ---------- section head --------------------------------------------- */
.testa{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem 2rem;
  align-items:end;padding:0 0 1.1rem;border-bottom:1px solid var(--linea-forte);
  margin-bottom:2.2rem}
.testa .occhiello{margin-bottom:.85rem}
.testa .azione{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;text-decoration:none;color:var(--blu);white-space:nowrap;
  border-bottom:1px solid oklch(0.355 0.145 270 / .3);padding-bottom:2px;
  transition:border-color .2s var(--ease),color .2s var(--ease)}
.testa .azione:hover{border-color:var(--blu);color:var(--blu-2)}

/* ---------- header ---------------------------------------------------- */
.top{position:sticky;top:0;z-index:60;background:oklch(0.985 0.004 85 / .93);
  backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--linea)}
.top-in{display:flex;align-items:center;gap:1.5rem;height:74px}
.marchio{display:flex;align-items:center;gap:.72rem;text-decoration:none;flex:0 0 auto}
.marchio img{width:38px;height:38px;object-fit:contain}
.marchio b{font-family:var(--serif);font-size:1.235rem;font-weight:500;letter-spacing:-.015em;
  line-height:1;display:block;font-variation-settings:'opsz' 20}
.marchio span{font-family:var(--mono);font-size:.605rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--inchiostro-2);display:block;margin-top:3px}
nav.principale{margin-left:auto;display:flex;align-items:center;gap:.15rem}
nav.principale > div{position:relative}
nav.principale a.voce,nav.principale button.voce{font-family:var(--mono);font-size:.715rem;
  letter-spacing:.13em;text-transform:uppercase;text-decoration:none;color:var(--inchiostro-2);
  padding:.62rem .78rem;display:inline-flex;align-items:center;gap:.34rem;border-radius:3px;
  background:none;border:0;cursor:pointer;font-weight:500;transition:color .18s var(--ease),background .18s var(--ease)}
nav.principale a.voce:hover,nav.principale button.voce:hover,nav.principale .aperto > .voce{
  color:var(--blu);background:var(--carta-2)}
nav.principale a.voce[aria-current]{color:var(--inchiostro);
  box-shadow:inset 0 -2px 0 var(--oro)}
.chev{width:7px;height:7px;border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);opacity:.55;transition:transform .22s var(--ease)}
.aperto .chev{transform:rotate(225deg) translate(-1px,-1px)}
.tendina{position:absolute;top:calc(100% + 8px);right:0;min-width:352px;background:var(--carta);
  border:1px solid var(--linea-forte);border-radius:4px;padding:.5rem;opacity:0;visibility:hidden;
  transform:translateY(-7px);transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s;
  box-shadow:0 26px 60px -34px oklch(0.215 0.02 265 / .55)}
.aperto .tendina{opacity:1;visibility:visible;transform:none}
.tendina a{display:block;text-decoration:none;padding:.62rem .8rem;border-radius:3px;
  transition:background .16s var(--ease)}
.tendina a:hover{background:var(--carta-2)}
.tendina a strong{display:block;font-size:.93rem;font-weight:530;letter-spacing:-.005em}
.tendina a em{display:block;font-style:normal;font-size:.78rem;color:var(--inchiostro-3);margin-top:1px}
.top .cta{font-family:var(--mono);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;
  text-decoration:none;padding:.66rem 1.05rem;border:1px solid var(--inchiostro);border-radius:3px;
  margin-left:.7rem;font-weight:500;transition:background .2s var(--ease),color .2s var(--ease)}
.top .cta:hover{background:var(--inchiostro);color:var(--carta)}
/* The same slot without the button, for every page that is not about us: the
   header offers a way to reach us instead of asking for the meeting. The reason
   is in CONFORMITA.md and it is legal, not editorial. */
.top .cta.cta-neutro{border-color:transparent;padding:.62rem .5rem;
  color:var(--inchiostro-2);font-weight:500}
.top .cta.cta-neutro:hover{background:var(--carta-2);color:var(--blu)}
/* ---------- language control -------------------------------------------
   A details element, so it opens, closes and reaches the keyboard with no
   script at all. It sits between the menu and the burger and survives on a
   phone, where the menu itself is hidden: an English reader on a phone still
   has to be able to leave the Italian page. */
.lingue{position:relative;flex:0 0 auto;margin-left:.55rem}
.lingue > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.42rem;
  padding:.5rem .62rem;border:1px solid var(--linea-forte);border-radius:3px;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;color:var(--inchiostro-2);
  transition:border-color .2s var(--ease),color .2s var(--ease)}
.lingue > summary::-webkit-details-marker{display:none}
.lingue > summary:hover{color:var(--inchiostro);border-color:var(--inchiostro)}
.lingue .globo{width:11px;height:11px;border-radius:50%;border:1.2px solid currentColor;
  position:relative;opacity:.75}
.lingue .globo::before{content:'';position:absolute;inset:-1.2px 2.6px;border-radius:50%;
  border:1.2px solid currentColor}
.lingue-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:214px;z-index:70;
  background:var(--carta);border:1px solid var(--linea-forte);border-radius:4px;padding:.4rem;
  box-shadow:0 26px 60px -34px oklch(0.215 0.02 265 / .55)}
.lingue-menu a{display:grid;grid-template-columns:2.1rem 1fr;align-items:baseline;gap:.5rem;
  text-decoration:none;padding:.5rem .6rem;border-radius:3px}
.lingue-menu a:hover{background:var(--carta-2)}
.lingue-menu a b{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;color:var(--oro-testo)}
.lingue-menu a span{font-size:.9rem}
.lingue-menu a[aria-current] span{font-weight:600}
.lingue-menu a[aria-current] b{color:var(--inchiostro)}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--linea-forte);
  border-radius:3px;width:42px;height:38px;cursor:pointer;align-items:center;justify-content:center}
.burger i{display:block;width:17px;height:1.5px;background:var(--inchiostro);position:relative}
.burger i::before,.burger i::after{content:'';position:absolute;left:0;width:17px;height:1.5px;
  background:var(--inchiostro);transition:transform .22s var(--ease)}
.burger i::before{top:-5.5px}.burger i::after{top:5.5px}

/* ---------- la riga dei numeri --------------------------------------- */
.riga{background:var(--quadro);color:var(--quadro-ink);border-bottom:1px solid var(--quadro-linea);
  position:relative;overflow:hidden}
.riga-in{display:flex;align-items:stretch;gap:0;overflow-x:auto;scrollbar-width:none;
  -webkit-overflow-scrolling:touch}
.riga-in::-webkit-scrollbar{display:none}
.riga .cella{display:flex;align-items:baseline;gap:.5rem;padding:.52rem .95rem;
  border-right:1px solid var(--quadro-linea);white-space:nowrap;flex:0 0 auto}
.riga .cella:first-child{padding-left:0}
.riga .k{font-family:var(--mono);font-size:.635rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--quadro-muto)}
.riga .v{font-family:var(--mono);font-size:.78rem;font-variant-numeric:tabular-nums;font-weight:500}
.riga .d{font-family:var(--mono);font-size:.7rem;font-variant-numeric:tabular-nums}
.riga .stato{margin-left:auto;display:flex;align-items:center;gap:.42rem;padding:.52rem 0 .52rem 1rem;
  font-family:var(--mono);font-size:.615rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--quadro-muto);flex:0 0 auto}
.pulse{width:5px;height:5px;border-radius:50%;background:var(--su);box-shadow:0 0 0 0 oklch(0.640 0.140 155 / .6);
  animation:pulse 2.6s infinite var(--ease)}
@keyframes pulse{70%{box-shadow:0 0 0 7px oklch(0.640 0.140 155 / 0)}100%{box-shadow:0 0 0 0 oklch(0.640 0.140 155 / 0)}}
.su{color:var(--su)}.giu{color:var(--giu)}.piatto{color:var(--inchiostro-3)}
/* On the dark board the same two states need the brighter pair to clear 4.5:1. */
.riga .su,.quadro .su,.fascia.scura .su,.calc-esito .su{color:var(--su-scuro)}
.riga .giu,.quadro .giu,.fascia.scura .giu,.calc-esito .giu{color:var(--giu-scuro)}
.riga .piatto,.quadro .piatto,.fascia.scura .piatto{color:var(--quadro-muto)}

/* ---------- quadro (the dark data panel) ----------------------------- */
.quadro{background:var(--quadro);color:var(--quadro-ink);border-radius:5px;overflow:hidden;
  --linea:var(--quadro-linea)}
.quadro .testa{border-color:var(--quadro-linea);padding:1.4rem 1.5rem 1.05rem;margin:0}
.quadro .testa .occhiello{color:var(--quadro-muto)}
.quadro h2,.quadro h3{color:var(--quadro-ink)}
.tabella{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.tabella th{font-family:var(--mono);font-size:.63rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--quadro-muto);font-weight:500;text-align:right;padding:.75rem 1.5rem .6rem;
  border-bottom:1px solid var(--quadro-linea)}
.tabella th:first-child{text-align:left}
.tabella td{padding:.72rem 1.5rem;border-bottom:1px solid oklch(0.325 0.022 262 / .45);
  font-family:var(--mono);font-size:.845rem;text-align:right;white-space:nowrap}
.tabella td:first-child{text-align:left;font-family:var(--sans);font-size:.93rem;
  font-weight:480;white-space:normal}
.tabella tr:last-child td{border-bottom:0}
.tabella tbody tr{transition:background .16s var(--ease)}
.tabella tbody tr:hover{background:oklch(0.235 0.020 262 / .7)}
.tabella .sim{display:block;font-family:var(--mono);font-size:.66rem;color:var(--quadro-muto);
  letter-spacing:.06em;margin-top:2px}
.spark{display:inline-block;vertical-align:middle}

/* ---------- banco (one instrument, laid out to be studied) ------------ */
.banco{background:var(--quadro);color:var(--quadro-ink);border-radius:5px;margin:0;
  overflow:hidden;--linea:var(--quadro-linea)}
.banco .su{color:var(--su-scuro)}
.banco .giu{color:var(--giu-scuro)}
.banco .piatto{color:var(--quadro-muto)}
.banco-testa{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:.9rem 2rem;padding:1.35rem 1.5rem 1.05rem;border-bottom:1px solid var(--quadro-linea)}
.banco-chi{flex:1 1 16rem;min-width:0}
.banco-chi .occhiello{color:var(--quadro-muto)}
.banco-chi h2,.banco-chi h3{color:var(--quadro-ink);margin:.4rem 0 0;line-height:1.12;
  font-size:clamp(1.3rem,2.5vw,1.85rem)}
.banco-quota{display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap;
  font-family:var(--mono);font-variant-numeric:tabular-nums}
.q-prezzo{font-size:clamp(1.7rem,3.6vw,2.5rem);font-weight:500;letter-spacing:-.025em;
  border-radius:3px;padding:0 .1em;margin:0 -.1em}
.q-var{font-size:.98rem;font-weight:500;white-space:nowrap}
.battito{animation:battito 1s var(--ease)}
@keyframes battito{0%{background:oklch(0.700 0.105 82 / .40)}100%{background:transparent}}
.banco-stato{flex:0 0 100%;font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--quadro-muto);display:flex;align-items:center;gap:.5rem}
.banco-legenda{display:flex;flex-wrap:wrap;gap:.3rem 1.4rem;font-family:var(--mono);
  font-size:.78rem}
.banco-legenda span{display:flex;align-items:center;gap:.45rem;color:var(--quadro-muto)}
.banco-legenda i{width:16px;height:2px;border-radius:2px;background:var(--oro);display:block}
.banco-legenda i.l-b{background:var(--quadro-muto)}
.banco-gamme{display:flex;gap:.3rem;padding:1rem 1.5rem .1rem;flex-wrap:wrap}
.banco-gamme button{appearance:none;background:transparent;border:1px solid var(--quadro-linea);
  color:var(--quadro-muto);font-family:var(--mono);font-size:.64rem;letter-spacing:.11em;
  text-transform:uppercase;padding:.42rem .72rem;border-radius:3px;cursor:pointer;
  transition:color .16s var(--ease),border-color .16s var(--ease),background .16s var(--ease)}
.banco-gamme button:hover{color:var(--quadro-ink);border-color:var(--quadro-muto)}
.banco-gamme button.attiva{background:var(--oro);border-color:var(--oro);
  color:oklch(0.185 0.018 262)}
.banco-tela{position:relative;padding:.9rem 1.5rem 1.1rem}
.g-scatola{position:relative;padding-right:4.4rem}
.g-tela{display:block;width:100%;height:clamp(190px,24vw,320px)}
.g-griglia line{stroke:oklch(0.325 0.022 262 / .55);stroke-width:1;
  vector-effect:non-scaling-stroke}
.g-linea{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;
  vector-effect:non-scaling-stroke}
.g-linea.l-a{stroke:var(--oro)}
.g-linea.l-b{stroke:var(--quadro-muto);stroke-width:1.6}
.g-rif{stroke:var(--quadro-muto);stroke-width:1;stroke-dasharray:4 5;
  vector-effect:non-scaling-stroke}
.g-mira{stroke:var(--oro);stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}
.g-livelli{position:absolute;inset:0;pointer-events:none}
.g-livelli span{position:absolute;right:0;transform:translateY(-50%);white-space:nowrap;
  font-family:var(--mono);font-size:.68rem;color:var(--quadro-muto);
  font-variant-numeric:tabular-nums}
.g-livelli .g-rif-eti{right:auto;left:0;font-size:.58rem;letter-spacing:.08em;
  text-transform:uppercase;transform:translateY(-150%)}
.g-tempi{position:relative;height:1.1rem;margin:.5rem 4.4rem 0 0}
.g-tempi span{position:absolute;transform:translateX(-50%);white-space:nowrap;
  font-family:var(--mono);font-size:.66rem;color:var(--quadro-muto)}
.g-tempi span:first-child{transform:none}
.g-tempi span:last-child{transform:translateX(-100%)}
.banco-lettura{position:absolute;top:.5rem;transform:translateX(-50%);pointer-events:none;
  z-index:2;background:oklch(0.235 0.020 262 / .96);border:1px solid var(--quadro-linea);
  border-radius:3px;padding:.3rem .6rem;font-family:var(--mono);display:flex;gap:.55rem;
  align-items:baseline;font-variant-numeric:tabular-nums}
.banco-lettura b{font-size:.9rem;font-weight:600}
.banco-lettura span{font-size:.66rem;color:var(--quadro-muto)}
/* display:flex beats the hidden attribute, and an empty readout box parked over
   the chart looks like a rendering fault. It has to be said explicitly. */
.banco-lettura[hidden]{display:none}
/* A page whose promise is the price opens on the price: less air above the
   band than a normal section, so the first chart is inside the first screen. */
.fascia-vetrina{padding-top:clamp(1.1rem,2.4vw,2rem)}
.banco-vuoto{padding:2.2rem 0;color:var(--quadro-muto);font-family:var(--mono);font-size:.8rem}
.banco-fascia{display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:.7rem;padding:0 1.5rem 1.05rem}
.banco-fascia .f-lo,.banco-fascia .f-hi{font-family:var(--mono);font-size:.72rem;
  color:var(--quadro-muto);font-variant-numeric:tabular-nums}
.f-barra{position:relative;height:4px;border-radius:3px;
  background:linear-gradient(90deg,var(--giu),oklch(0.325 0.022 262),var(--su))}
.f-punto{position:absolute;top:50%;width:11px;height:11px;border-radius:50%;
  background:var(--oro);transform:translate(-50%,-50%);
  box-shadow:0 0 0 3px oklch(0.185 0.018 262)}
.f-nota{grid-column:1/-1;margin:.2rem 0 0;font-size:.82rem;line-height:1.5;
  color:var(--quadro-muto)}
.banco-fatti{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));
  border-top:1px solid var(--quadro-linea)}
.banco-fatti > div{padding:.78rem 1.05rem;display:flex;flex-direction:column;gap:.18rem;
  min-width:0;border-right:1px solid oklch(0.325 0.022 262 / .5);
  border-bottom:1px solid oklch(0.325 0.022 262 / .5)}
/* "MINIMO 52 SETTIMANE" is the longest label the panel can print and it was
   losing its last letter off the edge of the tile. It has to be allowed to
   break, and the tile has to be allowed to be narrower than its content. */
.f-k{font-family:var(--mono);font-size:.58rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--quadro-muto);overflow-wrap:anywhere}
.f-v{font-family:var(--mono);font-size:.95rem;font-variant-numeric:tabular-nums}
.banco.confronto .f-nota{padding:0 1.5rem 1.15rem;margin:0}
.banchi{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,26rem),1fr))}

/* ---------- mappa (the heatmap) --------------------------------------- */
/* The grid background has to be the panel's own colour, not the hairline: with
   eleven tiles in a nine-column row the last row leaves seven empty cells, and
   any lighter colour there reads as a block of missing data. */
.mappa-griglia{display:grid;grid-template-columns:repeat(auto-fit,minmax(8.2rem,1fr));gap:1px;
  background:var(--quadro);border-top:1px solid var(--quadro-linea)}
.piastrella{background:var(--quadro);padding:.9rem 1rem;min-height:5.4rem;display:flex;
  flex-direction:column;gap:.14rem;justify-content:center;
  background:color-mix(in oklab,var(--tinta) calc(var(--peso) * 100%),var(--quadro));
  transition:transform .18s var(--ease)}
.piastrella:hover{transform:translateY(-2px)}
.piastrella .su,.piastrella .giu,.piastrella .piatto{color:var(--quadro-ink)}
.p-nome{font-size:.82rem;font-weight:500;line-height:1.25}
.p-var{font-family:var(--mono);font-size:1.05rem;font-variant-numeric:tabular-nums}
.p-prezzo{font-family:var(--mono);font-size:.66rem;color:oklch(0.955 0.005 85 / .6)}

/* ---------- cards, grids --------------------------------------------- */
.griglia{display:grid;gap:1px;background:var(--linea);border:1px solid var(--linea)}
.griglia > *{background:var(--carta);padding:1.5rem}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.scheda{display:flex;flex-direction:column;gap:.55rem;text-decoration:none;
  transition:background .2s var(--ease)}
a.scheda:hover{background:var(--carta-2)}
.scheda .data{font-family:var(--mono);font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--inchiostro-3)}
.scheda h3{font-size:1.16rem;font-variation-settings:'opsz' 18}
a.scheda:hover h3{color:var(--blu)}
.scheda p{font-size:.9rem;color:var(--inchiostro-2);margin:0;line-height:1.55}
.copertina{aspect-ratio:16/10;overflow:hidden;background:var(--carta-3);
  margin:-1.5rem -1.5rem .3rem;position:relative}
/* A piece with no photograph gets an engraved plate rather than a grey hole:
   two circular rulings slightly out of step with each other, which is how the
   guilloche on a certificate is made, and the shelf name struck in gold. It
   reads as a decision instead of as a missing image. */
.copertina.vuota{display:grid;place-items:center;position:relative;overflow:hidden;
  background:
    repeating-radial-gradient(circle at 26% 44%,transparent 0 7px,
      oklch(0.520 0.095 82 / .14) 7px 8px),
    repeating-radial-gradient(circle at 74% 58%,transparent 0 9px,
      oklch(0.520 0.095 82 / .11) 9px 10px),
    linear-gradient(150deg,var(--carta-2),var(--carta-3))}
.copertina.vuota::after{content:'';position:absolute;inset:11px;border:1px solid
  oklch(0.520 0.095 82 / .30);border-radius:2px}
.copertina.vuota span{position:relative;z-index:1;font-family:var(--mono);font-size:.62rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--oro-testo);
  background:var(--carta-2);padding:.32rem .7rem;border-radius:2px}
.fascia.scura .copertina.vuota{background:
  repeating-radial-gradient(circle at 26% 44%,transparent 0 6px,
    oklch(0.700 0.105 82 / .20) 6px 7px),
  repeating-radial-gradient(circle at 74% 58%,transparent 0 8px,
    oklch(0.700 0.105 82 / .15) 8px 9px),
  linear-gradient(150deg,oklch(0.245 0.021 262),oklch(0.200 0.018 262))}
.fascia.scura .copertina.vuota::after{border-color:oklch(0.700 0.105 82 / .28)}
.fascia.scura .copertina.vuota span{color:var(--oro);background:oklch(0.215 0.019 262)}
.copertina img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
a.scheda:hover .copertina img{transform:scale(1.032)}
/* The old cards darkened under the pointer and slid a caption in from the top.
   Same move, drawn as an arrow rather than a word, so it needs no translation
   on the nine landings. */
.copertina::before{content:'\2192';position:absolute;inset:0;z-index:1;display:grid;
  place-items:center;font-family:var(--mono);font-size:1.6rem;line-height:1;
  color:oklch(0.985 0.004 85);background:oklch(0.215 0.020 265 / .40);opacity:0;
  transform:translateY(-11px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
a.scheda:hover .copertina::before,a.scheda:focus-visible .copertina::before{
  opacity:1;transform:none}

/* ---------- the lead card ----------------------------------------------
   The old home ran its articles two to a row, so every cover was half the page
   wide. Three across reads better and carries more, but it shrinks the pictures
   to thumbnails. So the first piece takes the whole row with its cover at the
   old size, and the rest stay three across. */
.scheda.guida{grid-column:1 / -1;padding:0;display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:0;align-items:stretch}
.scheda.guida .copertina{margin:0;aspect-ratio:16/10;height:100%}
.scheda.guida .guida-testo{padding:clamp(1.4rem,2.6vw,2.3rem);display:flex;
  flex-direction:column;justify-content:center;gap:.75rem}
.scheda.guida h3{font-size:clamp(1.42rem,2.2vw,1.98rem);font-variation-settings:'opsz' 30}
.scheda.guida p{font-size:.98rem;line-height:1.6}

/* ---------- footer ---------------------------------------------------- */
footer.piede{background:var(--quadro);color:var(--quadro-ink);padding:4rem 0 2rem}
main > *:last-child:not(.banda) + footer.piede,
main:not(:has(> .banda:last-child)) + footer.piede{margin-top:0}
footer.piede a{color:var(--quadro-muto);text-decoration:none;transition:color .18s var(--ease)}
footer.piede a:hover{color:var(--quadro-ink)}
.piede-griglia{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:2.5rem}
.piede-griglia.due{grid-template-columns:1.7fr 1fr 1fr}
.piede .etichetta{font-family:var(--mono);font-size:.65rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--quadro-muto);font-weight:500;
  margin:0 0 1rem;display:block}
.piede ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;font-size:.88rem}
.timbro{display:inline-flex;flex-direction:column;gap:2px;border:1px solid var(--quadro-linea);
  border-radius:3px;padding:.55rem .8rem;font-family:var(--mono);margin-top:1.2rem}
.timbro em{font-style:normal;font-size:.575rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--quadro-muto)}
.timbro b{font-size:.9rem;letter-spacing:.06em;font-weight:500}
.coda{display:flex;flex-wrap:wrap;gap:1.2rem;justify-content:space-between;
  border-top:1px solid var(--quadro-linea);margin-top:3rem;padding-top:1.5rem;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;color:var(--quadro-muto)}
/* The one claim on the site that is a fact about how it is built rather than a
   promise: no cookies, nothing third party, nothing that follows anybody. It is
   printed where a cookie banner would otherwise sit, and it links to the part
   of the notice that says exactly what is and is not written to the device, so
   the sentence can be checked rather than believed. */
.coda-niente{font-family:var(--mono);font-size:.66rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--quadro-muto);text-decoration:none;
  display:inline-flex;align-items:center;gap:.5rem;
  border-bottom:1px solid transparent;padding-bottom:2px;
  transition:color .25s var(--ease),border-color .25s var(--ease)}
.coda-niente::before{content:'';width:5px;height:5px;border-radius:50%;
  background:var(--su-scuro);flex:0 0 auto}
.coda-niente:hover,.coda-niente:focus-visible{color:var(--quadro-ink);
  border-bottom-color:var(--oro)}

/* ---------- prose (imported editorial bodies) ------------------------- */
.prosa{max-width:none}
/* The reading size grows with the screen instead of staying at sixteen and a
   half pixels for ever. On a laptop nothing changes; on the wide monitors these
   pages are actually read on, seventeen pixels of body text inside a column
   half the screen wide is what made the site look like a narrow ribbon of small
   print. The floor is the old value, so no layout gets tighter than it was. */
.prosa p,.prosa li{font-size:clamp(1.055rem,.95rem + .28vw,1.24rem);line-height:1.7}
.prosa > h2{font-size:clamp(1.55rem,2.5vw,2.1rem);margin:2.9rem 0 .95rem;
  padding-top:1.5rem;border-top:1px solid var(--linea)}
.prosa > h3{margin:2.1rem 0 .7rem}
.prosa > h4{margin:1.6rem 0 .5rem;font-family:var(--sans);font-weight:600;font-size:1rem;
  letter-spacing:0}
/* The imported pages open their sections at whatever level WordPress had left
   over, mostly h4. Whichever tag it is, the one that acts as a section heading
   is marked and gets the section face, so a long page reads as a page with
   parts instead of as one uninterrupted column of grey. */
.prosa > .sezione{font-family:var(--serif);font-weight:500;letter-spacing:-.01em;
  font-size:clamp(1.45rem,2.3vw,1.95rem);line-height:1.2;color:var(--inchiostro);
  margin:3rem 0 1rem;padding-top:1.4rem;border-top:1px solid var(--linea);
  scroll-margin-top:6.5rem}
.prosa > .sezione:first-child{margin-top:0;padding-top:0;border-top:0}
.prosa > .sezione strong,.prosa > .sezione b{font-weight:500}
.prosa > .sezione::after{content:'';display:block;width:2.2rem;height:2px;margin-top:.75rem;
  background:linear-gradient(90deg,var(--oro),transparent)}
.prosa a{color:var(--blu);text-decoration:none;
  background-image:linear-gradient(oklch(0.355 0.145 270 / .34),oklch(0.355 0.145 270 / .34));
  background-size:100% 1px;background-repeat:no-repeat;background-position:0 1.16em;
  transition:background-size .2s var(--ease)}
.prosa a:hover{background-image:linear-gradient(var(--blu),var(--blu));background-size:100% 1px}
/* A button standing inside imported prose. `.prosa a` is one step more specific
   than `.bottone`, so the label came out link blue on the button's near black
   and could not be read, and the underline rule drew a line through it. */
.prosa .bottone{color:var(--carta);background-image:none}
.prosa .bottone:hover{color:var(--carta);background-image:none}
.invito-contatto{margin:1.8rem 0 0}
.prosa ul,.prosa ol{padding-left:1.15rem;margin:0 0 1.3rem}
.prosa li{margin-bottom:.45rem}
.prosa ul{list-style:none;padding-left:0}
.prosa ul > li{position:relative;padding-left:1.5rem}
.prosa ul > li::before{content:'';position:absolute;left:.28rem;top:.72em;width:5px;height:1px;
  background:var(--oro)}
.prosa img{margin:2rem 0;border:1px solid var(--linea)}
.prosa blockquote{margin:2.2rem 0;padding-left:1.6rem;border-left:2px solid var(--oro);
  font-family:var(--serif);font-size:1.24rem;line-height:1.5;color:var(--inchiostro-2);
  font-variation-settings:'opsz' 28}
.prosa blockquote p:last-child{margin-bottom:0}
.prosa .tabella-scorre{overflow-x:auto;margin:2rem 0;-webkit-overflow-scrolling:touch}
.prosa .tabella-scorre:focus-visible{outline:2px solid var(--inchiostro-3);outline-offset:3px}
.prosa .tabella-scorre table{margin:0}
.prosa table{width:100%;border-collapse:collapse;margin:2rem 0;font-size:.92rem}
@media (max-width:700px){.prosa .tabella-scorre table{min-width:34rem}}
.prosa th,.prosa td{border:1px solid var(--linea);padding:.6rem .8rem;text-align:left}
.prosa th{background:var(--carta-2);font-family:var(--mono);font-size:.7rem;
  letter-spacing:.1em;text-transform:uppercase;font-weight:500}
.prosa strong{font-weight:600}
.prosa > *:first-child{margin-top:0}

/* ---------- buttons --------------------------------------------------- */
.bottone,.bottone-vuoto{display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--mono);font-size:.735rem;letter-spacing:.13em;text-transform:uppercase;
  text-decoration:none;padding:.88rem 1.4rem;border-radius:3px;font-weight:500;
  border:1px solid var(--inchiostro);transition:background .22s var(--ease),
  color .22s var(--ease),border-color .22s var(--ease),transform .22s var(--ease)}
.bottone{background:var(--inchiostro);color:var(--carta)}
.bottone:hover{background:var(--blu);border-color:var(--blu);transform:translateY(-1px)}
.bottone-vuoto{background:none;color:var(--inchiostro);border-color:var(--linea-forte)}
.bottone-vuoto:hover{border-color:var(--inchiostro);transform:translateY(-1px)}
.scura .bottone{background:var(--carta);color:var(--inchiostro);border-color:var(--carta)}
.scura .bottone-vuoto,.banda .bottone-vuoto{color:var(--quadro-ink);border-color:var(--quadro-linea)}
.scura .bottone-vuoto:hover,.banda .bottone-vuoto:hover{border-color:var(--quadro-ink)}

/* ---------- section bands --------------------------------------------- */
.fascia{padding:clamp(3.6rem,7vw,6.4rem) 0}
.fascia + .fascia{padding-top:0}
.fascia.scura{background:var(--quadro);color:var(--quadro-ink);margin-top:clamp(3.6rem,7vw,6.4rem);
  padding-top:clamp(3.6rem,7vw,6.4rem);--linea:var(--quadro-linea);--linea-forte:var(--quadro-linea);
  --carta:var(--quadro);--carta-2:var(--quadro-2);--inchiostro:var(--quadro-ink);
  --inchiostro-2:var(--quadro-muto);--inchiostro-3:var(--quadro-muto)}
/* A band that already sits under a padded one does not need the margin too:
   the two together left a hand's width of empty paper between the team and
   the dark band, which reads as a missing section rather than as air. */
.fascia + .fascia.scura{margin-top:0}
.fascia.scura + .fascia{padding-top:clamp(3.6rem,7vw,6.4rem)}
.fascia.scura .testa .azione{color:var(--oro);border-color:oklch(0.700 0.105 82 / .45)}
.fascia.scura .occhiello .num,.quadro .occhiello .num,.banda .occhiello .num,
.calc-esito .occhiello .num{color:var(--oro)}
.fascia.scura .scheda p{color:var(--quadro-muto)}

/* ---------- hero ------------------------------------------------------ */
.apertura{padding:clamp(3rem,6vw,5.2rem) 0 clamp(2.6rem,5vw,4.4rem);
  border-bottom:1px solid var(--linea)}
.apertura-in{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,4.5rem);
  align-items:center}
.apertura-testo .occhiello{margin-bottom:1.5rem}
.apertura-testo h1{margin-bottom:1.4rem}
.apertura-azioni{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2.1rem}
.apertura-quadro .quadro{box-shadow:0 34px 70px -46px oklch(0.215 0.02 265 / .8)}
.quadro-testa{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.05rem 1.35rem;border-bottom:1px solid var(--quadro-linea)}
.quadro-testa .stato{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--mono);
  font-size:.6rem;letter-spacing:.11em;text-transform:uppercase;color:var(--quadro-muto)}
.tabella.compatta td{padding:.6rem 1.35rem;font-size:.815rem}
.tabella.compatta td:first-child{font-size:.88rem}
.quadro-piu{display:block;padding:.95rem 1.35rem;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--oro);text-decoration:none;
  border-top:1px solid var(--quadro-linea);transition:background .18s var(--ease)}
.quadro-piu:hover{background:var(--quadro-2)}
.nota-quadro{padding:1rem 1.5rem 1.3rem;margin:0;font-size:.78rem;line-height:1.5;
  color:var(--quadro-muto);border-top:1px solid var(--quadro-linea)}

/* ---------- the analysis panels -----------------------------------------
   Breadth is one bar split in two, because the question is a proportion and a
   proportion is the one thing a bar answers faster than a number. The
   correlation bar is a length and not a colour scale: the sign is already in
   the figure beside it, so a reader who cannot separate two reds still has it.
   ---------------------------------------------------------------------- */
.respiro{padding:1.2rem 1.5rem 0}
.respiro-cifre{display:flex;gap:2rem;flex-wrap:wrap;margin-bottom:1rem}
.respiro-cifre div{display:flex;flex-direction:column;gap:.15rem}
.respiro-cifre b{font-size:1.7rem;line-height:1;font-variant-numeric:tabular-nums}
.respiro-cifre span{font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;
  color:var(--quadro-muto)}
.respiro-barra{display:flex;height:.55rem;border-radius:3px;overflow:hidden;
  background:var(--quadro-2)}
.respiro-su{background:var(--su)}
.respiro-giu{background:var(--giu)}
.respiro-estremi{margin:.9rem 0 0;font-size:.85rem;line-height:1.6}
.corr-barra{width:100%;min-width:4.5rem;height:.4rem;border-radius:3px;
  background:var(--quadro-2);overflow:hidden}
.corr-barra span{display:block;height:100%;border-radius:3px}

/* ---------- hero over a photograph -------------------------------------
   The old home opened on the facade of Palazzo Grassi, full width, with the
   headline set white over it. That picture is the first thing anyone who has
   been to the office recognises, so it opens this one too. What it did not
   have is the board: here the numbers sit on the photograph as a pane of
   glass, which is the one thing this home has that the old one could not.
   Colours are written out rather than remapped through the tokens: a hero is
   the worst place to discover that a variable meant something else. */
.apertura-foto{position:relative;isolation:isolate;border-bottom:0;overflow:clip;
  color:var(--quadro-ink);padding:clamp(3.4rem,7vw,6.2rem) 0 clamp(3rem,6vw,5.4rem)}
.apertura-sfondo{position:absolute;inset:0;z-index:-2;background:var(--quadro)}
.apertura-sfondo img{width:100%;height:100%;object-fit:cover;object-position:50% var(--fuoco,58%);
  animation:respiro 24s var(--ease) both}
/* Two washes: one across, so the type side stays dark enough to read at any
   width, one down from the header, so the sticky bar never floats on a bright
   patch of wall. The strong part of the horizontal wash used to end at 44%,
   but the freshness line under the summary runs out past 65% of the width on
   the gold guide's banner, so it kept landing on a lit patch of the photo.
   Pushed the strong stop to 62% and raised the far-edge floor so the last
   word of that line stays dark enough to read without flattening the picture
   at the edge nothing sits on. */
.apertura-sfondo::after{content:'';position:absolute;inset:0;background:
  linear-gradient(100deg,oklch(0.150 0.018 262 / .92) 0%,oklch(0.150 0.018 262 / .82) 62%,
                  oklch(0.150 0.018 262 / .50) 100%),
  linear-gradient(to bottom,oklch(0.150 0.018 262 / .55),transparent 34%)}
/* A photograph taken at dusk needs less veil than one taken at midday.
   The wash above was measured on the facade of Palazzo Grassi in full sun,
   where a nearly opaque left side is the only way white type survives on it.
   The pictures made for the market pages and the archive open on a dark
   building, an empty hall at first light, a room with one lamp: under that
   same wash the subject disappears and the reader gets a black band with
   words on it, which is the same as having no picture while still paying to
   load one.
   Softened to the point where the picture reads again and not one step
   further. Measured, not guessed: both washes composited over the patch of
   each of the six photographs that actually sits under the type, worst pixel
   of each. The worst of the six comes out at 8.0:1 for the headline, 6.5:1
   for the summary and 4.9:1 for the small label above it, against the 4.5:1
   the guidelines ask for text at this size. Anything darker than these
   photographs is safe by construction; anything brighter has to be measured
   again before it goes in. */
.apertura-scura .apertura-sfondo::after{background:
  linear-gradient(100deg,oklch(0.150 0.018 262 / .80) 0%,oklch(0.150 0.018 262 / .70) 62%,
                  oklch(0.150 0.018 262 / .42) 100%),
  linear-gradient(to bottom,oklch(0.150 0.018 262 / .55),transparent 34%)}
@keyframes respiro{from{transform:scale(1.07)}to{transform:scale(1)}}
.apertura-oro .apertura-sfondo img{--fuoco:44%}
.apertura-oro .apertura-testo{max-width:56ch}
.apertura-foto h1{color:var(--quadro-ink)}
.apertura-foto .sommario{color:oklch(0.885 0.012 262)}
.apertura-foto .occhiello{color:oklch(0.800 0.014 262)}
.apertura-foto .occhiello .num{color:var(--oro)}
/* The freshness line inherited the muted ink meant for paper pages, a mid-tone
   that cannot clear WCAG AA against any photo veil no matter how dark: its own
   ceiling contrast against a fully opaque wash is under 3.6:1. Every other line
   in this block already gets a light override for the same reason; this one
   had been missed. */
.apertura-foto .fonte-riga{color:oklch(0.800 0.014 262)}
.apertura-foto .bottone{background:var(--carta);color:var(--inchiostro);border-color:var(--carta)}
.apertura-foto .bottone:hover{background:var(--oro);border-color:var(--oro);color:oklch(0.185 0.018 262)}
.apertura-foto .bottone-vuoto{color:var(--quadro-ink);border-color:oklch(0.985 0.004 85 / .38)}
.apertura-foto .bottone-vuoto:hover{border-color:var(--quadro-ink);background:oklch(0.985 0.004 85 / .08)}
.apertura-foto .apertura-quadro .quadro{background:oklch(0.150 0.018 262 / .78);
  backdrop-filter:blur(10px) saturate(1.25);border:1px solid oklch(0.985 0.004 85 / .13);
  box-shadow:0 44px 90px -52px oklch(0 0 0 / .9)}
/* On arrival the block is composed line by line, and the board comes in from
   the side a beat later. No script: the stylesheet blocks the first paint, so
   there is no window in which the headline shows and then hides itself. */
.apertura-foto .apertura-testo > *{animation:entra .95s var(--ease) both}
.apertura-foto .apertura-testo > *:nth-child(1){animation-delay:.06s}
.apertura-foto .apertura-testo > *:nth-child(2){animation-delay:.18s}
.apertura-foto .apertura-testo > *:nth-child(3){animation-delay:.30s}
.apertura-foto .apertura-testo > *:nth-child(4){animation-delay:.42s}
.apertura-foto .apertura-quadro{animation:entra-lato 1.05s var(--ease) .34s both}
@keyframes entra{from{opacity:0;transform:translateY(17px)}to{opacity:1;transform:none}}
@keyframes entra-lato{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}

/* ---------- the six promises ------------------------------------------
   All six are on the page from the first paint: number, headline and the
   claim itself, nothing a reader has to click to discover. The click only
   turns one of them over. The old home showed the same six as a column of
   check marks that faded in from the right, so they still arrive from the
   right, one after another, with the gold rule drawing across the top as
   each one lands. The open one flips from paper to the dark board, which is
   the same material the market tables are made of. */
.carte{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--linea);border:1px solid var(--linea);border-radius:4px;overflow:hidden}
.carta{background:var(--carta);position:relative;display:flex;flex-direction:column;
  transition:background .45s var(--ease),color .45s var(--ease)}
.carte .sale{transform:translateX(20px)}
.carta::before{content:'';position:absolute;top:0;left:0;height:2px;width:0;
  background:var(--oro);transition:width .9s var(--ease) .2s}
.carta.dentro::before{width:100%}
.carta-testa{display:grid;grid-template-columns:auto 1fr auto;gap:.9rem;align-items:start;
  width:100%;text-align:left;background:none;border:0;font:inherit;color:inherit;
  cursor:pointer;padding:1.35rem 1.35rem .55rem}
.carta .pn{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;
  color:var(--oro-testo);padding-top:.4rem;transition:color .45s var(--ease)}
.carta .tt{font-family:var(--serif);font-size:clamp(1.1rem,1.35vw,1.32rem);line-height:1.16;
  font-variation-settings:'opsz' 22;font-weight:420}
.carta .segno{width:12px;height:12px;position:relative;margin-top:.5rem;opacity:.42;
  transition:opacity .35s var(--ease)}
.carta .segno::before,.carta .segno::after{content:'';position:absolute;left:0;right:0;top:5px;
  height:1.5px;background:currentColor;transition:transform .45s var(--ease)}
.carta .segno::after{transform:rotate(90deg)}
.carta .breve{margin:0;padding:0 1.35rem 1.4rem 3.55rem;color:var(--inchiostro-2);
  font-size:.93rem;line-height:1.56;transition:color .45s var(--ease)}
/* 0fr to 1fr is the whole animation. A browser that does not understand it
   drops the declaration and simply shows every detail, which is the same
   content, only always open. */
.dettaglio{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.dettaglio > div{overflow:hidden}
.dettaglio p{margin:0;padding:0 1.35rem 1.5rem 3.55rem;font-size:.9rem;line-height:1.62;
  color:var(--inchiostro-2);border-top:1px solid transparent}
.carta:not(.attiva):hover{background:var(--carta-2)}
.carta.attiva{background:var(--quadro);color:var(--quadro-ink)}
.carta.attiva .pn{color:var(--oro)}
.carta.attiva .breve{color:var(--quadro-ink)}
.carta.attiva .segno{opacity:1}
.carta.attiva .segno::after{transform:rotate(0)}
.carta.attiva .dettaglio{grid-template-rows:1fr}
.carta.attiva .dettaglio p{color:var(--quadro-muto)}
.carta-testa:focus-visible{outline:2px solid var(--blu-2);outline-offset:-3px}
.carta.attiva .carta-testa:focus-visible{outline-color:var(--oro)}
/* On a landing there is no long text behind the claim, so the cards are read,
   not operated: no pointer, no hover state, no control that opens nothing. */
.carte.statiche .carta:hover{background:var(--carta)}
.carte.statiche .carta-testa{cursor:default;display:grid;grid-template-columns:auto 1fr;
  padding-bottom:.5rem}
@media (prefers-reduced-motion:reduce){
  .carta,.carta::before,.dettaglio,.carta .segno::before,.carta .segno::after{transition:none}
  .carta.dentro::before{width:100%}
}

/* ---------- the laurel plate beside the promises ------------------------
   The wreath with PERFORMANCE CERTIFICATA is a real piece of the identity,
   drawn once and used for years. It sits where the old home had it, left of
   the six promises, on multiply so its white ground disappears into paper. */
.punti-con-marchio{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1fr);
  gap:clamp(1.4rem,3vw,2.8rem);align-items:start}
.marchio-alloro{margin:0;background:#fff;border:1px solid var(--linea);border-radius:4px;
  padding:clamp(.9rem,1.6vw,1.5rem)}
.marchio-alloro img{width:100%;height:auto}
.marchio-alloro figcaption{font-size:.83rem;line-height:1.5;color:var(--inchiostro-3);
  margin-top:.7rem;max-width:32ch}
.marchio-alloro figcaption a{color:var(--blu);text-underline-offset:3px}
.marchio-alloro .timbro-chiaro{display:grid;width:100%;min-width:0;margin-top:.9rem;
  text-align:left;border-color:var(--linea)}

/* ---------- a full width plate, used for the crypto band ---------------- */
.striscia{display:block;margin:0 0 clamp(1.5rem,3vw,2.4rem);border:1px solid var(--linea);
  border-radius:4px;overflow:hidden;background:var(--carta-2)}
.striscia img{width:100%;height:auto}

/* ---------- the photograph under each message ---------------------------
   The two pictures are a studio still and a room shot, 928x464 and 300x167,
   so left to themselves they set two different heights and the pair reads as
   a mistake. One frame, both cropped into it. */
.messaggio-foto{margin:1rem 0 .3rem;border:1px solid var(--linea);border-radius:3px;
  overflow:hidden;background:var(--carta-2);aspect-ratio:16/9}
.messaggio-foto img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- who supervises us, and who we work with ---------------------
   Named sigillo, not segno: .segno is already the plus and minus inside the
   promise cards, and two things with one class name is a bug waiting. */
.fascia.stretta{padding-block:clamp(1.9rem,3.6vw,2.8rem)}
.fascia + .fascia.stretta{padding-top:0}
.fascia + .banda{margin-top:0}
.affiliazioni .occhiello{margin-bottom:1.1rem}
.sigilli{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));
  gap:clamp(1.4rem,3.4vw,3rem);align-items:end}
.sigillo{margin:0;text-align:center}
/* These four are the only proof on the page that somebody outside the company
   checks it, and the old home ran them large and in colour. Greyed down to
   fifty pixels they read as decoration, which is the opposite of the point. */
   Three of the four are JPEGs with a white ground, which on warm paper draws a
   white box around each mark: multiply drops the ground and keeps the ink. */
.sigillo img{height:68px;width:auto;margin:0 auto .7rem;object-fit:contain;opacity:.92;
  mix-blend-mode:multiply;transition:opacity .3s var(--ease),transform .3s var(--ease)}
.sigillo:hover img{opacity:1;transform:translateY(-2px)}
.sigillo figcaption{font-family:var(--mono);font-size:.62rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--inchiostro-3)}

/* ---------- people ----------------------------------------------------- */
.persone{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;
  background:var(--linea);border:1px solid var(--linea)}
.persona{background:var(--carta);padding:1.1rem;text-decoration:none;display:block;
  transition:background .2s var(--ease)}
.persona:hover{background:var(--carta-2)}
/* The portraits were desaturated to hold the row together. They are the only
   faces on the site and the site should feel inhabited, so they keep their
   colour and the row is held together by a light warm grade instead. */
.ritratto{aspect-ratio:3/4;overflow:hidden;background:var(--carta-3);margin-bottom:.85rem;
  filter:saturate(.92) contrast(1.04);transition:filter .5s var(--ease)}
.persona:hover .ritratto{filter:saturate(1.05) contrast(1.03)}
.ritratto img{width:100%;height:100%;object-fit:cover;object-position:center 22%}
.persona h3{font-size:1.06rem;font-variation-settings:'opsz' 18}
.persona .ruolo{font-family:var(--mono);font-size:.63rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--inchiostro-3);display:block;margin-top:.3rem}

/* The second half of the people section: the four consultants who are not
   employees. Same card and same size as the five above. The row was tried at
   half height and sideways, and a smaller portrait does not read as "different
   footing", it reads as "less important", which is the wrong thing to say
   about the people who cover trusts, inheritance disputes and collections.
   The rule, the label and the role line carry the distinction instead. */
.sotto-gruppo{margin:clamp(2.1rem,4vw,3.2rem) 0 1.3rem;
  padding-top:clamp(1.5rem,3vw,2.2rem);border-top:1px solid var(--linea)}
.sotto-gruppo .sommario{margin:.75rem 0 0;max-width:64ch}

/* ---------- the two messages ------------------------------------------ */
.messaggi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.5rem,3vw,3rem)}
.messaggio{position:relative;padding-left:2.6rem}
.virgoletta{position:absolute;left:0;top:-.85rem;font-family:var(--serif);font-size:3.6rem;
  line-height:1;color:var(--oro);opacity:.55}
.messaggio h3{margin-bottom:.6rem}
.messaggio p{color:var(--inchiostro-2);margin-bottom:.9rem}
.messaggio .azione{font-family:var(--mono);font-size:.7rem;letter-spacing:.13em;
  text-transform:uppercase;text-decoration:none;color:var(--blu);
  border-bottom:1px solid oklch(0.355 0.145 270 / .3);padding-bottom:2px}
.messaggio .azione:hover{border-color:var(--blu)}

/* ---------- two columns, notices --------------------------------------- */
.due-colonne{display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(1.5rem,4vw,3.5rem);
  align-items:start}
.avviso{border-left:2px solid var(--oro);padding:.15rem 0 .15rem 1.1rem;font-size:.95rem;
  color:var(--inchiostro-2);margin:1.6rem 0 0}
.cripto-numeri{display:grid;gap:1px;background:var(--linea);border:1px solid var(--linea)}
.cripto-numeri > div{background:var(--carta);padding:1.15rem 1.3rem;display:grid;gap:.2rem}
.cripto-numeri .k{font-family:var(--mono);font-size:.63rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--inchiostro-3)}
.cripto-numeri .v{font-family:var(--mono);font-size:1.4rem;font-variant-numeric:tabular-nums}

/* ---------- office ------------------------------------------------------ */
.sede-in{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.8rem,4vw,3.6rem);
  align-items:center}
.sede-foto img{border:1px solid var(--linea);filter:saturate(.82) contrast(1.03)}
.sede-testo h2{margin:.9rem 0 1rem}
.elenco-secco{list-style:none;padding:0;margin:1.6rem 0 1.9rem;display:grid;gap:.55rem}
.elenco-secco li{position:relative;padding-left:1.4rem;font-size:.94rem;color:var(--inchiostro-2)}
.elenco-secco li::before{content:'';position:absolute;left:0;top:.68em;width:7px;height:1px;
  background:var(--oro)}

/* ---------- contact band ------------------------------------------------ */
.banda{background:var(--quadro);color:var(--quadro-ink);padding:clamp(3rem,6vw,4.6rem) 0;
  margin-top:clamp(3.6rem,7vw,6.4rem)}
.banda-in{display:grid;grid-template-columns:1.35fr auto;gap:2rem;align-items:center}
.banda h2{color:var(--quadro-ink);margin-bottom:.8rem}
.banda-azioni{display:flex;flex-wrap:wrap;gap:.7rem}
.banda + footer.piede{margin-top:0;border-top:1px solid var(--quadro-linea)}

/* ---------- article colophon -------------------------------------------- */
.firma{display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:start;
  border-top:1px solid var(--linea-forte);margin-top:3.2rem;padding-top:1.6rem}
.firma p{font-size:.92rem;color:var(--inchiostro-2);margin-bottom:.7rem}
.firma .occhiello{margin-bottom:.7rem}
.timbro-chiaro{display:grid;gap:2px;border:1px solid var(--linea-forte);border-radius:3px;
  padding:.7rem .95rem;font-family:var(--mono);text-align:right;min-width:13rem}
.timbro-chiaro em{font-style:normal;font-size:.575rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--inchiostro-3)}
.timbro-chiaro b{font-size:1rem;letter-spacing:.06em;font-weight:500}
.timbro-chiaro span{font-size:.6rem;color:var(--inchiostro-3);line-height:1.4}

/* ---------- entrance ---------------------------------------------------
   The old home gave every block a direction to arrive from: the picture from
   the left, the promises one after another from the right, the text from
   above, each over about a second. That grammar is worth keeping, so it is
   here, with one curve for the whole site and the stagger taken from the
   position in the row rather than from a delay written by hand. */
.sale{opacity:0;transform:translateY(26px)}
.sale[data-verso="sx"]{transform:translateX(-40px)}
.sale[data-verso="dx"]{transform:translateX(40px)}
.sale[data-verso="giu"]{transform:translateY(-30px)}
.sale[data-verso="fermo"]{transform:none}
.sale.dentro{opacity:1;transform:none;
  transition:opacity 1s var(--ease),transform 1s var(--ease)}

/* A photograph is not faded in, it is uncovered: a sheet the colour of the page
   slides up off it while the picture itself settles out of a slow push in, and
   a hairline of gold rides the edge of the sheet as it goes. The veil is open
   by default, so an image that never sits inside an animated block is never
   left hidden underneath one. */
.velo{position:relative;overflow:hidden}
.velo::after{content:'';position:absolute;inset:0;z-index:2;background:var(--carta);
  transform:scaleY(0);transform-origin:50% 0;transition:transform 1.05s var(--ease) .08s;
  border-bottom:1px solid transparent}
.sale:not(.dentro) .velo::after,.velo.sale:not(.dentro)::after{transform:scaleY(1);
  border-bottom-color:oklch(0.700 0.105 82 / .85)}
.velo img{transform:scale(1.09);transition:transform 1.5s var(--ease) .05s}
.sale.dentro .velo img,.velo.sale.dentro img{transform:scale(1)}
.sale:not(.dentro) .velo img,.velo.sale:not(.dentro) img{transform:scale(1.09)}

@media (prefers-reduced-motion:reduce){
  .sale,.sale.dentro{opacity:1;transform:none;transition:none}
  .velo::after{display:none}
  .velo img,.sale.dentro .velo img,.velo.sale.dentro img{transform:none;transition:none}
  .apertura-foto .apertura-testo > *,.apertura-foto .apertura-quadro,
  .apertura-sfondo img{animation:none}
  .pulse{animation:none}
  .chat-bolla::after{animation:none}
  .chat-invito{transition:none}
  *{scroll-behavior:auto !important}
}

/* Two things the browser can animate against the scroll position itself, with
   no script and no scroll listener: the depth on a photograph, and the thread
   at the top of a long read that says how much of it is left. Browsers without
   scroll driven animations simply get neither. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .articolo-figura .figura-sfondo{animation:profondita linear both;
      animation-timeline:view();animation-range:entry 0% exit 100%}
    .messaggio-foto img,.sede-foto img{animation:profondita-lieve linear both;
      animation-timeline:view();animation-range:entry 10% exit 90%}
  }
}
@keyframes profondita{from{transform:scale(1.14) translateY(-3.5%)}
  to{transform:scale(1.14) translateY(3.5%)}}
@keyframes profondita-lieve{from{transform:scale(1.07) translateY(-2%)}
  to{transform:scale(1.07) translateY(2%)}}
@supports (animation-timeline:scroll()){
  .filo-lettura{position:fixed;top:0;left:0;right:0;height:2px;z-index:60;transform-origin:0 50%;
    background:linear-gradient(90deg,var(--oro),oklch(0.470 0.150 268));
    animation:filo linear both;animation-timeline:scroll(root block)}
}
@keyframes filo{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- focus ----------------------------------------------------- */
:where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{
  outline:2px solid var(--blu);outline-offset:3px;border-radius:2px}
.salta{position:absolute;left:-9999px;top:0;background:var(--inchiostro);color:var(--carta);
  padding:.7rem 1.1rem;z-index:200;font-family:var(--mono);font-size:.75rem}
.salta:focus{left:0}

/* Grid and flex children may shrink below their content: without this the
   market tables push the page wider than the phone. */
.due-quadri > *,.due-colonne > *,.griglia > *,.carte > *,.apertura-in > *,
.contatti-in > *,.sede-in > *,.calcolatore > *,.banda-in > *,.piede-griglia > *,
.servizio > *,.testa > *,.firma > *,.punti-con-marchio > *,.sigilli > *{min-width:0}
.scorre,.tab-orari,.tab-monete,.riga-in{max-width:100%}
.quadro{max-width:100%}

/* ---------- responsive ------------------------------------------------ */
@media (max-width:1080px){
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .piede-griglia{grid-template-columns:1fr 1fr;gap:2rem}
  .persone{grid-template-columns:repeat(2,minmax(0,1fr))}
  .apertura-in{grid-template-columns:minmax(0,1fr);gap:2.4rem}
  .carte{grid-template-columns:repeat(2,minmax(0,1fr))}
  .punti-con-marchio{grid-template-columns:minmax(0,1fr)}
  .marchio-alloro{max-width:340px}
  .due-colonne,.sede-in{grid-template-columns:minmax(0,1fr)}
  .banda-in{grid-template-columns:minmax(0,1fr)}
  .scheda.guida{grid-template-columns:minmax(0,1fr)}
  .scheda.guida .copertina{aspect-ratio:16/9;height:auto}
  /* Below this width the headline runs the full column, so the wash that
     darkened one side of the picture has to darken all of it instead. */
  .apertura-sfondo::after{background:linear-gradient(to bottom,
    oklch(0.150 0.018 262 / .90),oklch(0.150 0.018 262 / .78) 52%,oklch(0.150 0.018 262 / .88))}
  /* Restated for the dark-photograph variant, and deliberately identical.
     Its desktop rule carries a class, so it outranks the line above and would
     otherwise follow the page down to the narrow layout, where the headline
     runs across the whole picture instead of over one washed side. The
     softer wash is a desktop decision only. */
  .apertura-scura .apertura-sfondo::after{background:linear-gradient(to bottom,
    oklch(0.150 0.018 262 / .90),oklch(0.150 0.018 262 / .78) 52%,oklch(0.150 0.018 262 / .88))}
  .apertura-sfondo img{object-position:50% 46%}
}
@media (max-width:860px){
  body{font-size:16.5px}
  nav.principale{display:none}
  .burger{display:flex}
  .top .cta{display:none}
  /* Whichever of the two comes last is the one that holds the right edge. The
     language control is not on every page any more, and on the pages without it
     the burger used to slide back to the middle of the header. */
  .lingue{margin-left:auto}
  .burger{margin-left:auto}
  .lingue ~ .burger{margin-left:.5rem}
  .g2,.g3,.g4{grid-template-columns:minmax(0,1fr)}
  .testa{grid-template-columns:minmax(0,1fr)}
  .testa .azione{justify-self:start}
  .messaggi{grid-template-columns:minmax(0,1fr);gap:2.4rem}
  .firma{grid-template-columns:minmax(0,1fr)}
  .timbro-chiaro{text-align:left}
  .carte{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .piede-griglia{grid-template-columns:1fr}
  .marchio span{display:none}
  .riga .cella{padding:.5rem .7rem}
  .persone{grid-template-columns:repeat(2,minmax(0,1fr))}
  .carta .breve,.dettaglio p{padding-left:1.35rem}
  .apertura-azioni .bottone,.apertura-azioni .bottone-vuoto{flex:1 1 auto;justify-content:center}
}

/* ---------- mobile panel ---------------------------------------------- */
.pannello{position:fixed;inset:0;z-index:90;background:var(--carta);padding:1.4rem var(--gap) 3rem;
  overflow-y:auto;display:none}
.pannello.aperto{display:block}
.pannello .chiudi{position:absolute;top:1.4rem;right:var(--gap);background:none;border:0;
  font-size:1.7rem;line-height:1;cursor:pointer;color:var(--inchiostro-2)}
.pannello .etichetta{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--inchiostro-2);margin:2rem 0 .8rem;display:block}
.pannello a{display:block;text-decoration:none;font-family:var(--serif);font-size:1.5rem;
  padding:.42rem 0;border-bottom:1px solid var(--linea);font-variation-settings:'opsz' 24}

/* ---------- market page headers --------------------------------------- */
.apertura.mercato{padding-bottom:clamp(2rem,4vw,3.2rem)}
.apertura.mercato h1{max-width:19ch}
.fonte-riga{display:flex;align-items:center;gap:.5rem;margin:1.4rem 0 0;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--inchiostro-3)}
.fonte-riga .pulse{background:oklch(0.520 0.140 155);
  box-shadow:0 0 0 0 oklch(0.520 0.140 155 / .5)}
.due-quadri{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem;align-items:start}

/* ---------- plain tables (light material) ------------------------------ */
.tab-orari table,.tabella-chiara{width:100%;border-collapse:collapse;
  font-variant-numeric:tabular-nums}
.tab-orari th,.tabella-chiara th{font-family:var(--mono);font-size:.63rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--inchiostro-3);font-weight:500;text-align:left;
  padding:.7rem .9rem;border-bottom:1px solid var(--linea-forte)}
.tab-orari td,.tabella-chiara td{padding:.78rem .9rem;border-bottom:1px solid var(--linea);
  font-size:.92rem}
.tab-orari td:nth-child(2),.tab-orari td:nth-child(3){font-family:var(--mono);font-size:.86rem}
.tabella-chiara td:not(:first-child){font-family:var(--mono);font-size:.86rem;text-align:right}
.tabella-chiara th:not(:first-child){text-align:right}
.tabella-chiara .sim{display:block;font-family:var(--mono);font-size:.63rem;
  color:var(--inchiostro-3);letter-spacing:.06em;margin-top:2px}
.tabella-chiara tbody tr:hover{background:var(--carta-2)}
.tab-orari,.tab-monete{overflow-x:auto;border:1px solid var(--linea);border-radius:4px}
.scorre{overflow-x:auto}

/* ---------- classifica ------------------------------------------------ */
/* An ordered list, not a chart: the bar is scaled to the largest absolute move
   on the board, so the longest is always full and the rest are read against it.
   No axis to misread, and it degrades to a legible list when the bar cannot be
   drawn. */
.classifica{list-style:none;margin:0;padding:.2rem 0 .4rem}
.classifica li{display:grid;grid-template-columns:1.6rem minmax(6rem,1fr) minmax(3rem,2fr) 4.2rem;
  align-items:center;gap:.7rem;padding:.5rem 1.5rem;border-bottom:1px solid var(--quadro-linea)}
.classifica li:last-child{border-bottom:0}
.classifica .posto{font-family:var(--mono);font-size:.66rem;color:var(--quadro-muto);
  font-variant-numeric:tabular-nums}
.classifica .nome{font-size:.9rem}
.classifica .barra{height:5px;border-radius:3px;background:var(--quadro-linea);overflow:hidden}
.classifica .barra > span{display:block;height:100%;border-radius:3px;background:var(--quadro-muto)}
.classifica li.su .barra > span{background:var(--su-scuro)}
.classifica li.giu .barra > span{background:var(--giu-scuro)}
.classifica .valore{text-align:right;font-family:var(--mono);font-size:.76rem;
  font-variant-numeric:tabular-nums}
@media (max-width:620px){
  .classifica li{grid-template-columns:1.4rem minmax(4.5rem,1fr) 3.9rem;gap:.55rem;padding:.5rem 1rem}
  .classifica .barra{display:none}
}

/* ---------- pannello strumento ------------------------------------------ */
/* The strip and the boards both live inside overflow:auto, so a panel drawn
   in flow would be cut off by its own container. It is fixed and placed by
   scheda.js, which is also what keeps it inside the window near an edge.
   Without JavaScript nothing opens and nothing breaks: the numbers are all
   still on the page. */
.con-scheda{cursor:help}
.riga .cella.con-scheda:hover,.riga .cella.con-scheda:focus-visible{background:var(--quadro-2,rgba(255,255,255,.05))}
.quadro tr.con-scheda:hover,.quadro tr.con-scheda:focus-visible{background:oklch(0.235 0.020 262 / .7)}
.strumento{position:fixed;z-index:80;width:min(19rem,calc(100vw - 1.6rem));
  background:var(--quadro);color:var(--quadro-ink);border:1px solid var(--quadro-linea);
  border-radius:5px;padding:.95rem 1rem 0.8rem;box-shadow:0 18px 44px rgba(0,0,0,.34);
  opacity:0;transform:translateY(4px);pointer-events:none;
  transition:opacity .14s var(--ease),transform .14s var(--ease)}
.strumento[data-aperta]{opacity:1;transform:translateY(0)}
.strumento-testa{display:flex;align-items:baseline;justify-content:space-between;gap:.7rem}
.strumento-nome{font-family:var(--sans);font-size:.94rem;font-weight:600}
.strumento-sim{font-family:var(--mono);font-size:.63rem;letter-spacing:.1em;color:var(--quadro-muto)}
.strumento-prezzo{margin:.15rem 0 .5rem;font-family:var(--mono);font-size:1.28rem;
  font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
.strumento-oggi{font-size:.72rem}
.strumento-grafico{display:block;width:100%;height:auto;margin:.1rem 0 .6rem}
.strumento-voci{display:flex;flex-direction:column;gap:.02rem}
.strumento .voce{display:flex;justify-content:space-between;gap:1rem;
  padding:.3rem 0;border-top:1px solid var(--quadro-linea);
  font-family:var(--mono);font-size:.715rem;font-variant-numeric:tabular-nums}
.strumento .voce span:first-child{color:var(--quadro-muto);letter-spacing:.02em}
.strumento-nota{margin:.6rem 0 0;font-family:var(--mono);font-size:.6rem;line-height:1.5;
  color:var(--quadro-muto);border-top:1px solid var(--quadro-linea);padding-top:.5rem}
@media (hover:none){.strumento{width:min(21rem,calc(100vw - 1.2rem))}}
.tab-orari:focus-visible,.tab-monete:focus-visible,.scorre:focus-visible,
.riga-in:focus-visible{outline:2px solid var(--blu);outline-offset:-2px}
.tab-orari td:last-child{color:var(--inchiostro-2);font-size:.88rem}

/* ---------- gold ------------------------------------------------------- */
.oro-testa{margin-bottom:2rem}
.oro-cifre{display:flex;flex-wrap:wrap;gap:2.4rem;margin:.9rem 0 .7rem}
.oro-cifre div{display:grid}
.oro-cifre b{font-family:var(--mono);font-size:clamp(1.7rem,3.4vw,2.5rem);font-weight:500;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1}
.oro-cifre span{font-family:var(--mono);font-size:.63rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--inchiostro-3);margin-top:.4rem}
.calcolatore{display:grid;grid-template-columns:1.25fr .75fr;gap:0;
  border:1px solid var(--linea-forte);border-radius:4px;overflow:hidden}
.calc-campi{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;padding:clamp(1.3rem,2.5vw,1.9rem);
  background:var(--carta-2)}
.calc-campi label{display:grid;gap:.4rem;font-family:var(--mono);font-size:.63rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--inchiostro-3);position:relative}
.calc-campi label:first-child{grid-column:1 / -1}
.calc-campi select,.calc-campi input{font:inherit;font-size:.98rem;font-family:var(--sans);
  text-transform:none;letter-spacing:0;color:var(--inchiostro);padding:.66rem .8rem;
  border:1px solid var(--linea-forte);border-radius:3px;background:var(--carta);width:100%}
.calc-campi .suffisso{position:absolute;right:.85rem;bottom:.72rem;font-family:var(--mono);
  font-size:.8rem;color:var(--inchiostro-3)}
.calc-esito{background:var(--quadro);color:var(--quadro-ink);padding:clamp(1.3rem,2.5vw,1.9rem);
  display:flex;flex-direction:column;justify-content:center}
.calc-esito .occhiello{color:var(--quadro-muto);margin-bottom:.7rem}
.calc-esito output{font-family:var(--mono);font-size:clamp(1.6rem,3.2vw,2.3rem);font-weight:500;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1.1;display:block}
.calc-esito .piccolo{color:var(--quadro-muto);margin:.8rem 0 0}
.calc-esito output.lampo{animation:lampo 1.1s var(--ease)}
@keyframes lampo{0%{color:var(--oro);text-shadow:0 0 22px oklch(0.700 0.105 82 / .55)}
  100%{color:inherit;text-shadow:none}}

/* ---------- gold catalogue --------------------------------------------- */
.catalogo{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,268px),1fr));
  gap:clamp(1rem,1.8vw,1.5rem);margin-bottom:1.6rem}
.catalogo > *{min-width:0}
.moneta{position:relative;display:flex;flex-direction:column;padding:1.5rem 1.35rem 1.25rem;
  border:1px solid var(--linea);border-radius:5px;cursor:pointer;
  background:linear-gradient(176deg,var(--carta) 0%,var(--carta-2) 100%);
  transition:border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)}
.moneta:hover,.moneta.scelta{border-color:var(--oro);transform:translateY(-4px);
  box-shadow:0 22px 44px oklch(0.150 0.018 262 / .13)}
.moneta.scelta::before{content:'in calcolo';position:absolute;top:-.62rem;left:1.2rem;
  background:var(--oro);color:oklch(0.185 0.018 262);font-family:var(--mono);font-size:.58rem;
  letter-spacing:.14em;text-transform:uppercase;padding:.2rem .55rem;border-radius:2px}
.moneta-figura{position:relative;height:clamp(118px,13vw,150px);display:grid;place-items:center;
  margin-bottom:1.05rem}
.moneta-figura::before{content:'';position:absolute;width:78%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,oklch(0.700 0.105 82 / .22),transparent 68%);
  transition:transform .5s var(--ease),opacity .5s var(--ease);opacity:.85}
.moneta:hover .moneta-figura::before{transform:scale(1.16);opacity:1}
/* A percentage max-height against a centred grid area is not honoured, and the
   520px original then covered the card's own text. The cap is stated in the
   same units as the box it has to fit. */
.moneta-figura img{position:relative;max-height:clamp(118px,13vw,150px);width:auto;max-width:100%;
  filter:drop-shadow(0 14px 18px oklch(0.150 0.018 262 / .30));
  transition:transform .55s var(--ease)}
.moneta:hover .moneta-figura img{transform:scale(1.07)}
.moneta-conio{position:relative;width:clamp(104px,11vw,128px);aspect-ratio:1;border-radius:50%;
  display:grid;place-content:center;text-align:center;
  background:conic-gradient(from 210deg,oklch(0.820 0.075 88),oklch(0.640 0.105 78),
    oklch(0.870 0.060 92),oklch(0.620 0.100 76),oklch(0.820 0.075 88));
  box-shadow:inset 0 0 0 1px oklch(0.520 0.080 78 / .55),0 12px 22px oklch(0.150 0.018 262 / .22)}
.moneta-conio b{font-family:var(--mono);font-size:1.28rem;font-weight:500;
  color:oklch(0.300 0.045 70);line-height:1}
.moneta-conio i{display:block;font-family:var(--mono);font-style:normal;font-size:.52rem;
  letter-spacing:.12em;text-transform:uppercase;color:oklch(0.380 0.045 70);margin-top:.34rem}
.moneta h3{font-size:1.06rem;line-height:1.25;margin:0 0 .3rem}
.moneta-dove{font-family:var(--mono);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--inchiostro-3)}
.moneta-nota{font-size:.86rem;line-height:1.5;color:var(--inchiostro-2);margin:.75rem 0 1rem}
.moneta-dati{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;margin:0 0 1rem;
  padding-top:.85rem;border-top:1px solid var(--linea)}
.moneta-dati dt{font-family:var(--mono);font-size:.55rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--inchiostro-3)}
.moneta-dati dd{margin:.22rem 0 0;font-family:var(--mono);font-size:.82rem;
  font-variant-numeric:tabular-nums;color:var(--inchiostro)}
.moneta-prezzo{margin-top:auto}
.moneta-prezzo .occhiello{color:var(--inchiostro-3);margin-bottom:.3rem}
.moneta-prezzo b{display:block;font-family:var(--mono);font-size:1.32rem;font-weight:500;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--inchiostro)}
.moneta-usa{margin-top:.95rem;font:inherit;font-family:var(--mono);font-size:.6rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--inchiostro-2);cursor:pointer;
  background:transparent;border:1px solid var(--linea-forte);border-radius:3px;
  padding:.5rem .8rem;transition:border-color .2s var(--ease),color .2s var(--ease),
    background-color .2s var(--ease)}
.moneta:hover .moneta-usa,.moneta-usa:focus-visible{border-color:var(--oro);
  color:var(--inchiostro);background:oklch(0.700 0.105 82 / .10)}
.crediti{font-size:.76rem;line-height:1.6;color:var(--inchiostro-3);max-width:80ch;margin:0}

/* ---------- television ------------------------------------------------- */
/* The still is ours and loads with the page. The player is fetched only when
   somebody presses it, which is also the only moment youtube learns anybody is
   here. So the wall costs one image each and no third party call. */
.muro-video{display:grid;gap:clamp(1.1rem,2.4vw,2rem);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr))}
.video-scheda{display:flex;flex-direction:column;background:var(--carta-2);
  border:1px solid var(--linea);border-radius:4px;overflow:hidden;
  transition:border-color .3s var(--ease),transform .3s var(--ease)}
.video-scheda:hover{border-color:var(--linea-forte);transform:translateY(-2px)}
.video-cornice{position:relative;aspect-ratio:16/9;background:var(--inchiostro);
  margin:0;overflow:hidden}
.video-cornice img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.94) contrast(1.05);transition:transform .8s var(--ease),filter .4s var(--ease)}
.video-scheda:hover .video-cornice img{transform:scale(1.04);filter:saturate(1) contrast(1.08)}
.video-cornice iframe{width:100%;height:100%;border:0;display:block}
.video-play{position:absolute;inset:0;width:100%;height:100%;cursor:pointer;
  background:linear-gradient(180deg,oklch(0.145 0.012 265 / .05) 45%,
    oklch(0.145 0.012 265 / .58));border:0;display:grid;place-items:center;padding:0}
.video-play span{width:clamp(46px,6.5vw,58px);aspect-ratio:1;border-radius:50%;
  background:oklch(0.985 0.004 85 / .93);display:grid;place-items:center;
  box-shadow:0 6px 26px oklch(0.145 0.012 265 / .45);
  transition:transform .3s var(--ease),background-color .3s var(--ease)}
.video-play span::after{content:'';border-style:solid;border-width:.5rem 0 .5rem .84rem;
  border-color:transparent transparent transparent var(--inchiostro);margin-left:.22rem}
.video-play:hover span,.video-play:focus-visible span{transform:scale(1.09);background:var(--oro)}
.video-programma{position:absolute;left:.65rem;top:.65rem;z-index:2;
  font-family:var(--mono);font-size:.58rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--carta);background:oklch(0.145 0.012 265 / .74);border-radius:2px;
  padding:.24rem .48rem;pointer-events:none}
.video-testo{padding:clamp(.95rem,2vw,1.3rem);display:flex;flex-direction:column;gap:.55rem;flex:1}
.video-testo h3{font-family:var(--serif);font-size:clamp(1.02rem,1.5vw,1.16rem);
  line-height:1.28;margin:0}
.video-testo p{margin:0;font-size:.86rem;line-height:1.55;color:var(--inchiostro-2)}
.video-dopo{margin-top:auto;padding-top:.7rem;border-top:1px solid var(--linea);
  font-size:.8rem;line-height:1.5;color:var(--inchiostro-3)}
@media (prefers-reduced-motion:reduce){
  .video-scheda,.video-cornice img,.video-play span{transition:none}
  .video-scheda:hover,.video-scheda:hover .video-cornice img{transform:none}
}

/* ---------- from the world --------------------------------------------- */
/* Four themes, not a wall of headlines. Our sentence first, because that is the
   part an aggregator cannot give; then the numbers we already hold; then who
   said what, dated and linked. The source line is small and always there: a
   card without it does not get served (lint.py, notizia-senza-fonte). */
.nz-griglia{display:grid;gap:clamp(1rem,2.2vw,1.8rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr))}
.nz-griglia.lunga{grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))}
.nz-carta{display:flex;flex-direction:column;gap:.8rem;background:var(--carta-2);
  border:1px solid var(--linea);border-radius:4px;
  padding:clamp(1.1rem,2.2vw,1.5rem);position:relative;overflow:hidden;
  transition:border-color .3s var(--ease)}
.nz-carta::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,var(--oro),transparent 70%);opacity:.55}
.nz-carta:hover{border-color:var(--linea-forte)}
.nz-carta h3{font-family:var(--serif);font-size:clamp(1.08rem,1.6vw,1.28rem);
  line-height:1.24;margin:0}
.nz-perche{margin:0;font-size:.88rem;line-height:1.58;color:var(--inchiostro-2)}
.nz-numeri{display:flex;flex-wrap:wrap;gap:.5rem .9rem;padding:.6rem 0;
  border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.nz-numero{display:flex;align-items:baseline;gap:.35rem;font-family:var(--mono);
  font-size:.72rem;white-space:nowrap}
.nz-eti{color:var(--inchiostro-3);letter-spacing:.04em}
.nz-numero b{font-weight:600;color:var(--inchiostro)}
.nz-var.su{color:oklch(0.560 0.115 155)}
.nz-var.giu{color:oklch(0.560 0.150 25)}
.nz-var.fermo{color:var(--inchiostro-3)}
.nz-voci{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.nz-voce{display:grid;gap:.2rem;font-size:.85rem;line-height:1.45}
.nz-voce a{color:var(--inchiostro);text-decoration:none;
  background-image:linear-gradient(var(--linea-forte),var(--linea-forte));
  background-size:100% 1px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .3s var(--ease),color .3s var(--ease)}
.nz-voce a:hover{color:var(--oro-scuro,var(--inchiostro));background-size:100% 2px}
.nz-fonte{font-family:var(--mono);font-size:.66rem;letter-spacing:.05em;
  color:var(--inchiostro-3);text-transform:uppercase}
.nz-oltre{margin-top:auto;font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--inchiostro-2);text-decoration:none;
  border-bottom:1px solid var(--linea-forte);align-self:start;padding-bottom:.15rem}
.nz-oltre:hover{color:var(--inchiostro);border-color:var(--oro)}
.nz-nota,.nz-chi{font-size:.78rem;line-height:1.6;color:var(--inchiostro-3);
  margin:clamp(1rem,2vw,1.6rem) 0 0;max-width:78ch}
.nz-chi{margin-top:1.2rem}

/* ---------- attachments -------------------------------------------------- */
/* Documents and figures the import dropped, put back at the end of the prose
   rather than inside the imported body. */
.allegati{margin:2.4rem 0 0;padding:1.1rem 1.3rem;background:var(--carta-2);
  border:1px solid var(--linea);border-radius:4px}
.allegati h2{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--inchiostro-3);margin:0 0 .7rem;
  border:0;padding:0}
.allegati ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.allegati li{display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem;font-size:.9rem}
.allegati .peso{font-family:var(--mono);font-size:.66rem;color:var(--inchiostro-3)}
.tavola{margin:2rem 0;padding:0}
/* Never upscale: these are charts and diagrams, and a 699 pixel wide chart
   stretched to fill a 1000 pixel column is a blurred chart. width:auto lets the
   intrinsic size win, max-width keeps it inside the column on a narrow screen. */
.tavola img{width:auto;max-width:100%;height:auto;display:block;margin-inline:auto;
  border:1px solid var(--linea);border-radius:3px;background:var(--carta)}
.tavola figcaption{margin-top:.6rem;font-size:.78rem;line-height:1.55;
  color:var(--inchiostro-3)}

/* ---------- services --------------------------------------------------- */
.servizi{display:grid;gap:0;border-top:1px solid var(--linea)}
.servizio{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(1.2rem,4vw,3.5rem);
  padding:clamp(1.6rem,3vw,2.5rem) 0;border-bottom:1px solid var(--linea)}
.servizio-testa h3{margin-top:.55rem}
.servizio-corpo .breve{font-family:var(--serif);font-size:clamp(1.1rem,1.6vw,1.32rem);
  line-height:1.46;font-variation-settings:'opsz' 22;color:var(--inchiostro);margin-bottom:1rem}
.servizio-corpo .elenco-secco{margin:0}

/* ---------- article ----------------------------------------------------- */
.articolo-testa{padding:clamp(2.6rem,5vw,4.4rem) 0 clamp(1.6rem,3vw,2.4rem);
  border-bottom:1px solid var(--linea)}
.articolo-testa h1{max-width:20ch;margin:1.3rem 0 1.1rem}
.articolo-testa .occhiello a{color:var(--blu);text-decoration:underline;
  text-underline-offset:3px}
/* One column by default. The two column shape belongs to the pages that have an
   index to put in the rail: without that modifier the prose used to land in the
   15rem track and the page rendered as a 240px ribbon. */
.articolo-corpo{display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(1.5rem,5vw,4.5rem);padding:clamp(2.2rem,4vw,3.6rem) 0}
/* Prose starts where every other block on the page starts, at the left edge of
   the shell, and it is not centred.

   Measured on the gold page at a 1715px viewport, before: the shell was 1320px
   wide from x=190, the section heading and its rule ran the full 1320, the
   summary under it was 778px from x=190 - and the reading column was 751px
   from x=475, so almost exactly as wide as the summary it looked narrow beside.
   The column was not too narrow. It was floating, with 285px of nothing on each
   side of it, on a page where nothing else floated, and that is what reads as a
   box dropped into the middle of the screen.

   So the prose block itself takes the whole width of its track, exactly like
   the section head does, and what stays at a reading measure is the running
   text inside it: the rule above each section heading, its title, and any
   table or picture now run the full width, and the paragraphs sit at 78ch
   under them. Same shape as the block on the gold page that reads right. */
.articolo-corpo.con-indice{grid-template-columns:15rem minmax(0,1fr);
  justify-content:start}
.articolo-corpo .prosa,.colonna-lettura{max-width:none}
.articolo-corpo .prosa :is(p,ul,ol,blockquote),
.colonna-lettura :is(p,ul,ol,blockquote){max-width:78ch}
/* inside a cell or a bullet the cap belongs to the container, not to each line */
.articolo-corpo .prosa :is(td,th,li) :is(p,ul,ol),
.colonna-lettura :is(td,th,li) :is(p,ul,ol){max-width:none}
/* The piece's own picture, on a stage made from itself. */
.articolo-figura{position:relative;isolation:isolate;margin:0;display:grid;
  place-items:center;overflow:clip;background:var(--quadro);
  padding:clamp(1.6rem,3.4vw,3rem) var(--gap);border-bottom:1px solid var(--linea)}
.articolo-figura .figura-sfondo{position:absolute;inset:-8%;z-index:-1;
  background-size:cover;background-position:50% 50%;
  filter:blur(34px) saturate(1.35) brightness(.40) contrast(1.1);transform:scale(1.14)}
.articolo-figura::after{content:'';position:absolute;inset:0;z-index:-1;
  background:radial-gradient(120% 92% at 50% 42%,oklch(0.150 0.018 262 / .18) 22%,
    oklch(0.150 0.018 262 / .80) 100%)}
.articolo-figura img{max-height:clamp(200px,32vw,400px);width:auto;max-width:min(100%,1000px);
  border:1px solid oklch(0.955 0.005 85 / .16);box-shadow:0 26px 60px oklch(0.150 0.018 262 / .5)}
.sommario-laterale{position:sticky;top:6.5rem;align-self:start;
  border-top:1px solid var(--linea-forte);padding-top:1rem}
.sommario-laterale ul{list-style:none;margin:.9rem 0 0;padding:0;display:grid;gap:.55rem}
.sommario-laterale a{font-size:.85rem;color:var(--inchiostro-2);text-decoration:none;
  line-height:1.35;display:block;border-left:1px solid transparent;padding-left:.7rem;
  margin-left:-.7rem;transition:color .18s var(--ease),border-color .18s var(--ease)}
.sommario-laterale a:hover{color:var(--blu);border-color:var(--oro)}

/* ---------- search ------------------------------------------------------ */
.cerca{display:flex;gap:.6rem;margin-top:2rem;max-width:34rem}
.cerca input{flex:1;font:inherit;font-size:1rem;padding:.82rem 1rem;border:1px solid var(--linea-forte);
  border-radius:3px;background:var(--carta);color:var(--inchiostro)}
.cerca input::placeholder{color:var(--inchiostro-3)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- contact form ------------------------------------------------ */
.contatti-in{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.8rem,5vw,4rem);
  align-items:start}
.modulo{border:1px solid var(--linea-forte);border-radius:4px;padding:clamp(1.4rem,3vw,2.2rem);
  background:var(--carta-2)}
.modulo h2{font-size:1.6rem;margin-bottom:1.4rem}
.campo{display:grid;gap:.35rem;margin-bottom:1rem}
.campo label{font-family:var(--mono);font-size:.63rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--inchiostro-3)}
.campo .opz{text-transform:none;letter-spacing:0;color:var(--inchiostro-2)}
.campo input,.campo select,.campo textarea{font:inherit;font-size:1rem;padding:.7rem .85rem;
  border:1px solid var(--linea-forte);border-radius:3px;background:var(--carta);
  color:var(--inchiostro);width:100%;resize:vertical}
.consenso{display:flex;gap:.65rem;align-items:flex-start;font-size:.86rem;
  color:var(--inchiostro-2);margin:1.1rem 0 1.4rem;line-height:1.5}
.consenso input{margin-top:.25rem;flex:0 0 auto;accent-color:var(--blu)}
.esito{margin:1rem 0 0;font-size:.9rem;min-height:1.2em}
.esito.ok{color:oklch(0.470 0.130 155)}
.esito.ko{color:oklch(0.500 0.180 25)}
.recapiti{display:grid;gap:1.6rem}
.recapito p{margin:.5rem 0 0;color:var(--inchiostro-2);font-size:.95rem;line-height:1.62}
.recapito a{color:var(--blu);text-decoration:none}
.persone.quattro .persona p{font-size:.85rem;color:var(--inchiostro-2);margin:.6rem 0 0;
  line-height:1.5}
.niente-foto{display:block;width:100%;height:100%;
  background:linear-gradient(135deg,var(--carta-3),var(--carta-2))}

/* ---------- assistant --------------------------------------------------- */
.chat-bolla{position:fixed;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:70;
  display:inline-flex;align-items:center;gap:.6rem;background:var(--inchiostro);color:var(--carta);
  border:0;border-radius:999px;padding:.85rem 1.25rem;cursor:pointer;font-family:var(--mono);
  font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;
  box-shadow:0 18px 40px -20px oklch(0.215 0.02 265 / .75);
  transition:transform .25s var(--ease),background .25s var(--ease)}
.chat-bolla:hover{transform:translateY(-2px);background:var(--blu)}
.chat-bolla .punto-vivo{width:6px;height:6px;border-radius:50%;background:var(--su)}
/* Three rings on arrival and then nothing: enough for the eye to find the
   assistant in the corner, not enough to sit there flashing at the reader. */
.chat-bolla::after{content:'';position:absolute;inset:0;border-radius:999px;pointer-events:none;
  border:1px solid var(--oro);opacity:0;animation:richiamo 2.4s var(--ease) 1.2s 3}
@keyframes richiamo{0%{transform:scale(1);opacity:.8}
  65%{transform:scale(1.3);opacity:0}100%{transform:scale(1.3);opacity:0}}
/* Below 768px the first screen is already full: the opening board's price
   rows or the gold calculator's fields run right to the edge, so the full
   pill would sit on top of a number or a field the instant the page loads.
   It shrinks to an icon-only 44x44 circle, the minimum comfortable touch
   size, and the label moves off-screen rather than out of the accessibility
   tree, so a screen reader still announces "Chiedi a noi". The corner offset
   alone is not enough on the home layout: its board starts right under the
   two hero buttons with no gap deep enough for the usual corner, so there the
   launcher lifts into the strip of empty space between the buttons and the
   board instead. */
@media (max-width:768px){
  .chat-bolla{width:44px;height:44px;padding:0;gap:0;justify-content:center;bottom:2.5rem}
  .chat-bolla .testo{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .chat-bolla .punto-vivo{width:8px;height:8px}
  body:has(.apertura-quadro) .chat-bolla{bottom:8.125rem}
}
/* The card that comes up on its own, once. The old site had one and its
   absence was the thing noticed first about the new one; what it does NOT get
   back is the menu of service areas it used to open with, because offering
   categories to somebody who has asked for nothing is what CONFORMITA.md rule
   6 rules out. It talks about the page already open instead, which is a
   narrower offer than the old one, not a wider one. */
/* The recording on the article it belongs to: one frame, not the three-across
   wall of /class-cnbc/, and two of the twenty have no still on disk, so the
   frame has to hold its shape without a photograph in it. */
.fascia-video .occhiello{margin-bottom:1.1rem}
.muro-uno{display:grid;grid-template-columns:minmax(0,860px);justify-content:start}
.video-senza-fermo{display:block;width:100%;aspect-ratio:16/9;
  background:linear-gradient(140deg,oklch(0.245 0.026 262),oklch(0.185 0.018 262))}
.chat-invito{position:fixed;right:clamp(1rem,3vw,2rem);
  bottom:calc(clamp(1rem,3vw,2rem) + 3.7rem);z-index:71;
  width:min(310px,calc(100vw - 2rem));background:var(--carta);
  border:1px solid var(--linea-forte);border-radius:6px;padding:1.05rem 1.1rem .9rem;
  box-shadow:0 24px 56px -30px oklch(0.215 0.02 265 / .75);
  opacity:0;transform:translateY(12px);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.chat-invito.viva{opacity:1;transform:none}
.chat-invito p{margin:0 0 .85rem;font-size:.88rem;line-height:1.55;color:var(--inchiostro-2);
  padding-right:.9rem}
.chat-invito-apri{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;background:var(--inchiostro);color:var(--carta);border:0;
  border-radius:999px;padding:.52rem 1rem;cursor:pointer;
  transition:background .25s var(--ease)}
.chat-invito-apri:hover{background:var(--blu)}
.chat-invito-chiudi{position:absolute;top:.3rem;right:.4rem;background:none;border:0;
  font-size:1.2rem;line-height:1;cursor:pointer;color:var(--inchiostro-3);padding:.15rem .35rem}
.chat-invito-chiudi:hover{color:var(--inchiostro)}
/* The unread mark on the launcher, so the card is still findable after it has
   been closed and the reader wants it back. */
.chat-bolla .segno{position:absolute;top:-6px;right:-6px;min-width:19px;height:19px;
  border-radius:999px;background:var(--oro);color:var(--quadro);font-family:var(--mono);
  font-size:.62rem;line-height:19px;text-align:center;padding:0 4px;
  box-shadow:0 0 0 2px var(--carta)}
@media (max-width:768px){
  /* the launcher is a 44px circle down here, and the home board sits right
     under the hero buttons, so the card follows it up instead of covering a
     price row */
  .chat-invito{bottom:calc(2.5rem + 44px + .55rem)}
  body:has(.apertura-quadro) .chat-invito{bottom:calc(8.125rem + 44px + .55rem)}
}
.chat-scatola{position:fixed;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:80;
  width:min(380px,calc(100vw - 2rem));height:min(560px,calc(100vh - 2rem));background:var(--carta);
  border:1px solid var(--linea-forte);border-radius:6px;display:none;flex-direction:column;
  overflow:hidden;box-shadow:0 34px 80px -40px oklch(0.215 0.02 265 / .8)}
.chat-scatola.aperta{display:flex}
.chat-testa{display:flex;align-items:center;gap:.7rem;padding:.95rem 1.1rem;
  border-bottom:1px solid var(--linea);background:var(--carta-2)}
.chat-testa b{font-family:var(--serif);font-size:1.05rem;font-weight:500;
  font-variation-settings:'opsz' 18}
.chat-testa span{font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--inchiostro-3);display:block}
.chat-testa .chiudi{margin-left:auto;background:none;border:0;font-size:1.4rem;line-height:1;
  cursor:pointer;color:var(--inchiostro-3)}
.chat-corpo{flex:1;overflow-y:auto;padding:1.1rem;display:flex;flex-direction:column;gap:.8rem}
.msg{max-width:88%;padding:.72rem .9rem;border-radius:4px;font-size:.92rem;line-height:1.55}
.msg.loro{background:var(--carta-2);border:1px solid var(--linea);align-self:flex-start}
.msg.tuo{background:var(--inchiostro);color:var(--carta);align-self:flex-end}
.msg a{color:var(--blu);font-family:var(--mono);font-size:.68rem;letter-spacing:.11em;
  text-transform:uppercase;text-decoration:none;display:inline-block;margin-top:.55rem;
  border-bottom:1px solid oklch(0.355 0.145 270 / .35);padding-bottom:1px}
.chat-scelte{display:flex;flex-wrap:wrap;gap:.4rem;padding:0 1.1rem .3rem}
.chat-scelte button{font:inherit;font-size:.78rem;background:none;border:1px solid var(--linea-forte);
  border-radius:999px;padding:.38rem .75rem;cursor:pointer;color:var(--inchiostro-2);
  transition:border-color .18s var(--ease),color .18s var(--ease)}
.chat-scelte button:hover{border-color:var(--inchiostro);color:var(--inchiostro)}
.chat-piede{border-top:1px solid var(--linea);padding:.7rem;display:flex;gap:.5rem}
.chat-piede input{flex:1;font:inherit;font-size:.95rem;padding:.62rem .8rem;
  border:1px solid var(--linea-forte);border-radius:3px;background:var(--carta)}
.chat-piede button{background:var(--inchiostro);color:var(--carta);border:0;border-radius:3px;
  padding:0 1rem;cursor:pointer;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase}
.chat-nota{padding:.5rem 1.1rem .8rem;font-size:.68rem;color:var(--inchiostro-3);line-height:1.4}
/* The one action we want taken is the one that is offered in the brand colour;
   the others stay as outlines, so the row reads as a choice with a suggestion
   in it rather than as four buttons of equal weight. */
.chat-scelte button.principale{border-color:var(--oro);color:var(--inchiostro);
  background:oklch(0.700 0.105 82 / .14);font-weight:500}
.chat-scelte button.principale:hover{background:oklch(0.700 0.105 82 / .22);
  border-color:var(--oro-testo)}

@media (max-width:1080px){
  .due-quadri{grid-template-columns:minmax(0,1fr)}
  .calcolatore{grid-template-columns:minmax(0,1fr)}
  .articolo-corpo,.articolo-corpo.con-indice{grid-template-columns:minmax(0,1fr)}
  .sommario-laterale{position:static;margin-bottom:1rem}
  .sommario-laterale ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .contatti-in{grid-template-columns:minmax(0,1fr)}
  .servizio{grid-template-columns:minmax(0,1fr);gap:1rem}
}
@media (max-width:560px){
  .calc-campi{grid-template-columns:minmax(0,1fr)}
  .oro-cifre{gap:1.4rem}
  .sommario-laterale ul{grid-template-columns:minmax(0,1fr)}
}

/* ---------- atmosfera --------------------------------------------------
   The light this site is made of. Everything below is decoration over a page
   that was already finished: delete the whole block and every word, number and
   link stays exactly where it was.

   Two rules held throughout. Nothing here touches a colour a contrast
   measurement depends on, so the washes over the hero photograph and the two
   states on the dark board are left alone and every glow is drawn behind the
   type, never over it. And every movement sits inside
   prefers-reduced-motion: no-preference, so a visitor who asked their system
   for less motion gets the static page rather than a slower version of this
   one. */

/* The dark data panels are the one surface on a paper-coloured site that can
   hold light, so they are lit rather than filled: a cold source high on the
   left, a warm one low on the right, both far enough down in opacity that the
   panel still reads as one flat object. This is the difference between a pane
   of glass and a hole in the page. */
.quadro{position:relative;isolation:isolate}
.quadro::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(118% 86% at 10% -10%,oklch(0.470 0.150 268 / .34),transparent 60%),
    radial-gradient(76% 62% at 104% 108%,oklch(0.700 0.105 82 / .13),transparent 64%)}
.quadro > *{position:relative;z-index:1}
/* One hairline of light along the top edge, brightest in the middle, is how
   glass catches a room. A border that reads as a material. */
.quadro::after{content:'';position:absolute;left:0;right:0;top:0;height:1px;z-index:2;
  pointer-events:none;background:linear-gradient(90deg,transparent,
    oklch(0.985 0.004 85 / .26) 26%,oklch(0.985 0.004 85 / .30) 74%,transparent)}
/* On paper the panel also has to sit above the page rather than in it. The
   hero board already carries a shadow measured against the photograph, so it
   is excluded here instead of being given a second one. */
.fascia:not(.scura) .quadro,.sezione .quadro{
  box-shadow:0 1px 2px oklch(0.215 0.020 265 / .06),
             0 20px 44px -26px oklch(0.215 0.020 265 / .40)}
.apertura-quadro .quadro{box-shadow:0 44px 90px -52px oklch(0 0 0 / .9)}

/* The strip of numbers. It was a row you could drag; now it drifts on its own,
   slowly enough to read a value as it goes past, and stops the moment a
   pointer or a keyboard reaches it. A row of live prices that never moves is
   the one thing on a financial page that looks switched off. The fades at both
   ends say the row continues rather than ends. */
.riga{--sfuma:clamp(28px,7vw,64px)}
/* Wide enough that a value only half past the edge reads as fading out
   rather than as a number with its first digits cut off, which is what a
   narrow fade over a drifting row of figures actually looks like. */
.riga::before,.riga::after{content:'';position:absolute;top:0;bottom:0;width:var(--sfuma);
  z-index:2;pointer-events:none}
.riga::before{left:0;background:linear-gradient(90deg,var(--quadro),transparent)}
.riga::after{right:0;background:linear-gradient(270deg,var(--quadro),transparent)}
.riga .cella .v{transition:color .6s var(--ease)}
/* A value that has just changed lights up for a moment and settles back. */
.riga .cella.cambiata .v{color:var(--oro);transition:color .12s var(--ease)}

/* Cards lift. They used to change background only, which reads as a hover
   state on a list; a card that rises reads as an object you could pick up. The
   gold rule grows in from the left rather than appearing, because the eye
   follows a line that draws and ignores one that blinks. */
.griglia > *{position:relative}
a.scheda{transition:background .2s var(--ease),transform .28s var(--ease),
  box-shadow .28s var(--ease)}
a.scheda::after{content:'';position:absolute;left:0;top:0;height:2px;width:0;
  background:linear-gradient(90deg,var(--oro),oklch(0.820 0.090 88));
  transition:width .4s var(--ease);z-index:3}
a.scheda:hover::after,a.scheda:focus-visible::after{width:100%}
@media (hover:hover){
  a.scheda:hover{transform:translateY(-3px);
    box-shadow:0 22px 42px -28px oklch(0.215 0.020 265 / .55)}
}

/* Buttons take one pass of light on hover. Not another colour change on top of
   the one they already have: a highlight that travels, which is what struck
   metal does under a lamp that moves. */
.bottone{position:relative;overflow:hidden;isolation:isolate}
.bottone::before{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,transparent 34%,
    oklch(0.985 0.004 85 / .30) 50%,transparent 66%);
  transform:translateX(-130%)}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .bottone:hover::before{animation:lampo .78s var(--ease) both}
}
@keyframes lampo{to{transform:translateX(130%)}}

/* The eyebrow number is struck rather than printed: the same gold as the rest
   of the identity, given a gradient so it reads as leaf and not as an orange
   digit. */
.occhiello .num{background:linear-gradient(160deg,oklch(0.830 0.090 92),
  var(--oro) 46%,oklch(0.560 0.090 78));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.apertura-foto .occhiello .num{background:linear-gradient(160deg,
  oklch(0.900 0.075 95),var(--oro) 48%,oklch(0.640 0.100 80));
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* Portraits. Five people photographed by five different people over ten years,
   on a white wall, in a corridor, against a brick face, at different distances
   and in different light. Keeping their colour was a decision and it stays;
   what the row was missing is a shared atmosphere, so every frame gets the
   same soft fall of light from the top left and the same warm floor. It is the
   trick the coin catalogue uses, applied to faces: nothing is taken away, one
   light is added to all of them, and it lifts under the pointer so the face
   you are reading is the least veiled thing on the row. */
.ritratto{position:relative}
.ritratto::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(150deg,oklch(0.985 0.004 85 / .10),transparent 42%),
    radial-gradient(120% 100% at 50% 108%,oklch(0.520 0.095 82 / .16),transparent 58%);
  mix-blend-mode:multiply;opacity:.55;transition:opacity .5s var(--ease)}
.persona:hover .ritratto::after{opacity:.26}

/* The sparklines on the board draw themselves the first time the panel is
   seen, left to right, at about the speed a hand would draw them. */
/* Both of these hide something until a script reveals it, so both are locked
   behind the class the script adds to the document on its very first line. With
   no JavaScript, a blocked file or reduced motion asked for, the class never
   arrives, the rules never match, and the chart and the rule are simply drawn.
   A decoration that can hide content when it fails is not a decoration. */
@media (prefers-reduced-motion:no-preference){
  html.atm .spark path{stroke-dasharray:var(--len,200);stroke-dashoffset:var(--len,200)}
  html.atm .spark.tracciata path{transition:stroke-dashoffset 1.15s var(--ease);
    stroke-dashoffset:0}
}

/* Readability floor on a phone. Six labels in the chrome were set between 9.6
   and 11px, which is fine on a desk and is not fine held at arm's length: the
   company line under the mark, the breadcrumb, the licence line under the
   number, the footer, the strip labels, the role under each face. The list is
   measured rather than guessed - every one of the three hundred pages was
   rendered at 390 by 844 and every text node under 12px recorded. Nothing is
   re-laid out here, only the type grows. */
@media (max-width:760px){
  .marchio span span{font-size:12px;letter-spacing:.055em}
  .briciole,.briciole a{font-size:12px}
  .piede .etichetta,.pannello .etichetta{font-size:12px}
  .piede .coda span,.coda-niente{font-size:12px}
  .timbro-chiaro em,.timbro-chiaro span{font-size:12px}
  .quadro-piu,.nz-fonte,.nz-oltre,.nz-eti{font-size:12px}
  .chat-invito-apri,.chat-nota,.chat-bolla .testo,
  .chat-testa span,.chat-scatola .chat-testa span{font-size:12px}
  /* The dense figures on the market pages get 11.5 rather than 12: they sit in
     a two-column grid whose labels are already long, and a full point of growth
     wraps half of them onto a second line, which costs more legibility than the
     size gains. */
  .f-k,.g-livelli .g-rif-eti,.riga .k{font-size:11.5px}
  .persona .ruolo,.scheda .data{font-size:11.5px}
  .occhiello{font-size:12px}
}