/* ==============================================================
   CSCRC Conti di casa — foglio di stile
   Sistema visivo: molta aria, linee sottili da 1px,
   raggio 4px, titoli in serif leggero. Prefisso classi: cs-
   ============================================================== */

@font-face { font-family: 'Monument'; font-weight: 400; font-style: normal; font-display: swap; ascent-override: 76%; descent-override: 24%; line-gap-override: 0%; src: url('fonts/MonumentGrotesk-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Monument'; font-weight: 500; font-style: normal; font-display: swap; ascent-override: 76%; descent-override: 24%; line-gap-override: 0%; src: url('fonts/MonumentGrotesk-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Monument'; font-weight: 700; font-style: normal; font-display: swap; ascent-override: 76%; descent-override: 24%; line-gap-override: 0%; src: url('fonts/MonumentGrotesk-Bold.woff2') format('woff2'); }
@font-face { font-family: 'MonumentMono'; font-weight: 400; font-style: normal; font-display: swap; ascent-override: 76%; descent-override: 24%; line-gap-override: 0%; src: url('fonts/MonumentGrotesk-Mono.woff2') format('woff2'); }
@font-face { font-family: 'Signifier'; font-weight: 300; font-style: normal; font-display: swap; src: url('fonts/Signifier-Light.woff2') format('woff2'); }
@font-face { font-family: 'Signifier'; font-weight: 400; font-style: normal; font-display: swap; src: url('fonts/Signifier-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Signifier'; font-weight: 400; font-style: italic; font-display: swap; src: url('fonts/Signifier-RegularItalic.woff2') format('woff2'); }
@font-face { font-family: 'Signifier'; font-weight: 500; font-style: normal; font-display: swap; src: url('fonts/Signifier-Medium.woff2') format('woff2'); }

:root {
  --cs-bg: #DDE3E6;
  --cs-paper: #F4F6F7;
  --cs-ink: #22313C;
  --cs-body: #46596A;
  --cs-muted: #5E7180;
  --cs-rule: #D5DDE2;
  --cs-teal: #2F7D8C;
  --cs-teal-2: #7FB3BD;
  --cs-teal-3: #C3DADF;
  --cs-tint: #EAF0F2;
  --cs-tint-2: #EAF3F4;
  --cs-ice: #9CC5CD;
  --cs-ice-2: #B7C6CF;
  --cs-white: #FFFFFF;
  --cs-pad: 64px;
  --cs-serif: 'Signifier', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --cs-sans: 'Monument', 'Helvetica Neue', Arial, sans-serif;
  --cs-mono: 'MonumentMono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--cs-bg); color: var(--cs-ink); font-family: var(--cs-sans); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--cs-teal); }
img { max-width: 100%; display: block; }
button, input { font: inherit; }
:focus-visible { outline: 2px solid var(--cs-teal); outline-offset: 2px; }

.cs-skip { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; }
a.cs-skip:focus { left: 16px; top: 16px; width: auto; height: auto; z-index: 100; background: var(--cs-ink); color: #fff; padding: 10px 14px; border-radius: 4px; }

/* Trattamento fotografico unico: colori smorzati, freddi. */
.cs-photo { width: 100%; object-fit: cover; border-radius: 4px; background: var(--cs-tint); filter: saturate(.78) contrast(.97) brightness(1.02); }

/* ---------- Striscia di trasparenza ---------- */
.cs-disclosure { background: var(--cs-ink); color: var(--cs-ice-2); font-family: var(--cs-mono); font-size: 11.5px; line-height: 1.4; text-align: center; padding: 7px 16px; }
.cs-disclosure b { color: #fff; font-weight: 400; }
.cs-wrap { max-width: 1280px; margin: 0 auto; }

/* ---------- Guscio pagina ---------- */
.cs-page { max-width: 1280px; margin: 0 auto; background: var(--cs-paper); min-height: 100vh; overflow-x: clip; }

/* ---------- Testata ---------- */
.cs-top { position: relative; height: 76px; display: flex; justify-content: space-between; align-items: center; padding: 0 var(--cs-pad); border-bottom: 1px solid var(--cs-rule); }
.cs-logo { display: flex; align-items: center; gap: 12px; line-height: 1; }
.cs-logo:hover { color: var(--cs-ink); }
.cs-logo-bars { display: flex; flex-direction: column; gap: 3px; }
.cs-logo-bars i { display: block; height: 3px; background: var(--cs-teal); width: 22px; }
.cs-logo-bars i:nth-child(2) { width: 16px; background: var(--cs-teal-2); }
.cs-logo-bars i:nth-child(3) { width: 10px; background: var(--cs-teal-3); }
.cs-logo-word { font-size: 21px; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; }
.cs-logo-word span { font-weight: 400; color: var(--cs-muted); }
.cs-nav { display: flex; align-items: center; gap: 34px; font-size: 14.5px; line-height: 1; color: var(--cs-body); }
.cs-nav a[aria-current="page"] { color: var(--cs-teal); }
.cs-nav-btn { height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 18px; border-radius: 4px; background: var(--cs-ink); color: #fff; }
.cs-nav-btn:hover { background: var(--cs-teal); color: #fff; }
.cs-navtoggle, .cs-burger { display: none; }

/* ---------- Riga di servizio (mono) ---------- */
.cs-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-family: var(--cs-mono); font-size: 12px; color: var(--cs-teal); line-height: 1.3; }
.cs-meta img { width: 15px; height: 15px; }
.cs-meta--light { color: var(--cs-ice); }
.cs-adlabel { margin: 0 0 16px; display: inline-block; font-family: var(--cs-mono); font-size: 11.5px; color: var(--cs-body); border: 1px solid var(--cs-rule); border-radius: 4px; padding: 6px 10px; background: var(--cs-white); }

.cs-more { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; color: var(--cs-teal); line-height: 1; }
.cs-more span { width: 28px; height: 1px; background: var(--cs-teal); transition: width .2s; }
.cs-more:hover span { width: 40px; }

/* ---------- Prima pagina: apertura ---------- */
.cs-lead { padding: 80px var(--cs-pad) 0; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 80px; align-items: end; }
.cs-lead-h { margin: 22px 0 0; font-family: var(--cs-serif); font-size: clamp(40px, 5.6vw, 72px); font-weight: 300; line-height: 1.02; letter-spacing: -0.02em; text-wrap: pretty; }
.cs-lead-side { padding-bottom: 10px; }
.cs-lead-side p { margin: 0 0 20px; font-size: 17px; line-height: 1.6; color: var(--cs-body); }
.cs-panorama { display: block; padding: 44px var(--cs-pad) 0; }
.cs-panorama img { height: 480px; object-position: 50% 45%; }

/* ---------- Argomenti 2x2 ---------- */
.cs-topicsec { padding: 80px var(--cs-pad) 0; display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 64px; }
.cs-topicsec-h { margin: 0; font-size: 22px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.3; }
.cs-topicsec p { margin: 10px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--cs-muted); }
.cs-topics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--cs-ink); }
.cs-topic { display: grid; grid-template-columns: 44px minmax(0, 1fr) 60px; gap: 16px; align-items: center; padding: 26px 24px 26px 0; border-bottom: 1px solid var(--cs-rule); line-height: 1.3; }
.cs-topics .cs-topic:nth-child(odd) { border-right: 1px solid var(--cs-rule); }
.cs-topics .cs-topic:nth-child(even) { padding: 26px 0 26px 24px; }
.cs-topic:hover { background: var(--cs-tint); color: var(--cs-ink); }
.cs-topic img { width: 30px; height: 30px; }
.cs-topic-name { font-size: 19px; font-weight: 500; }
.cs-topic-sub { margin-top: 4px; font-size: 14px; color: var(--cs-muted); }
.cs-topic-n { font-family: var(--cs-mono); font-size: 12px; color: var(--cs-muted); text-align: right; }
.cs-topics--wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cs-topics--wide .cs-topic, .cs-topics--wide .cs-topic:nth-child(even) { padding: 26px 20px; border-right: 1px solid var(--cs-rule); }
.cs-topics--wide .cs-topic:nth-child(3n) { border-right: 0; }

/* ---------- Sezioni e schede ---------- */
.cs-sec { padding: 80px var(--cs-pad) 0; }
.cs-sec--tight { padding-top: 56px; }
.cs-sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; flex-wrap: wrap; padding-bottom: 18px; margin-bottom: 32px; border-bottom: 1px solid var(--cs-ink); }
.cs-sec-h { margin: 0; font-size: 22px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.3; }
.cs-sec-note { font-family: var(--cs-mono); font-size: 12px; color: var(--cs-muted); }
.cs-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.cs-cards--two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }
.cs-card { display: block; }
.cs-card .cs-photo { height: 280px; }
.cs-cards--two .cs-card .cs-photo { height: 320px; }
.cs-card-kicker { margin-top: 18px; font-family: var(--cs-mono); font-size: 11.5px; color: var(--cs-teal); line-height: 1.3; }
.cs-card-title { margin-top: 8px; font-family: var(--cs-serif); font-size: 26px; font-weight: 400; line-height: 1.15; text-wrap: pretty; }
.cs-card-ex { margin: 10px 0 0; font-size: 15px; line-height: 1.55; color: var(--cs-body); }
.cs-card:hover .cs-card-title { color: var(--cs-teal); }

/* Elenco a righe */
.cs-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 64px; }
.cs-row { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--cs-rule); }
.cs-row img { margin-top: 2px; }
.cs-row-kicker { font-family: var(--cs-mono); font-size: 11.5px; color: var(--cs-muted); line-height: 1.3; }
.cs-row-title { margin-top: 6px; font-family: var(--cs-serif); font-size: 22px; line-height: 1.2; text-wrap: pretty; }
.cs-row:hover .cs-row-title { color: var(--cs-teal); }

/* ---------- Griglia di tre cifre ---------- */
.cs-figs { margin: 44px 0; }
.cs-figs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--cs-rule); border: 1px solid var(--cs-rule); border-radius: 4px; overflow: hidden; }
.cs-fig { display: block; background: var(--cs-white); padding: 22px; }
.cs-fig-label { font-family: var(--cs-mono); font-size: 11px; color: var(--cs-muted); line-height: 1.4; }
.cs-fig-val { margin-top: 10px; font-family: var(--cs-sans); font-size: 32px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; }
.cs-fig-src { margin-top: 10px; font-size: 13px; color: var(--cs-muted); line-height: 1.4; }
.cs-fig--hl { background: var(--cs-tint-2); }
.cs-fig--hl .cs-fig-label, .cs-fig--hl .cs-fig-val { color: var(--cs-teal); }
a.cs-fig:hover { background: var(--cs-tint); color: var(--cs-ink); }
a.cs-fig--hl:hover { background: #DDEDEF; }
.cs-figs figcaption { margin-top: 10px; font-family: var(--cs-sans); font-size: 13px; line-height: 1.5; color: var(--cs-muted); }
.cs-figs--home { margin: 0; }
.cs-figs--home .cs-fig-val { font-size: clamp(26px, 3vw, 36px); }

/* ---------- Fascia newsletter ---------- */
.cs-band { margin: 88px var(--cs-pad) 0; background: var(--cs-ink); color: #fff; border-radius: 4px; padding: 56px 64px; display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 64px; align-items: end; }
.cs-band-h { margin: 16px 0 0; font-family: var(--cs-serif); font-size: clamp(30px, 3.6vw, 44px); font-weight: 300; line-height: 1.08; }
.cs-form { display: flex; border-bottom: 1px solid var(--cs-ice); }
.cs-form input[type=email] { flex: 1; min-width: 0; height: 50px; padding: 0 2px; font-family: var(--cs-sans); font-size: 16px; border: 0; background: transparent; color: #fff; outline: none; border-radius: 0; }
.cs-form input[type=email]::placeholder { color: var(--cs-ice-2); opacity: 1; }
.cs-form button { height: 50px; padding: 0 4px 0 20px; display: flex; align-items: center; gap: 10px; font-family: var(--cs-sans); font-size: 15px; font-weight: 500; line-height: 1; border: 0; background: transparent; color: #fff; cursor: pointer; }
.cs-form button span { width: 24px; height: 1px; background: #fff; transition: width .2s; }
.cs-form button:hover span { width: 34px; }
.cs-consent { margin-top: 14px; display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 12.5px; line-height: 1.5; color: var(--cs-ice-2); cursor: pointer; }
.cs-consent input { margin: 2px 0 0; width: 16px; height: 16px; accent-color: var(--cs-teal); }
.cs-consent a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.cs-optin-fine { margin-top: 10px; font-size: 12.5px; line-height: 1.5; color: var(--cs-ice-2); }
.cs-form-msg { margin-top: 8px; font-size: 13px; min-height: 1em; }
.cs-form-msg[data-state="err"] { color: #F3C9B8; }
.cs-form-msg[data-state="ok"] { color: var(--cs-ice); }

.cs-optin--inline { margin-top: 48px; background: var(--cs-ink); color: #fff; border-radius: 4px; padding: 32px 36px; }
.cs-optin-title { font-family: var(--cs-serif); font-size: 28px; font-weight: 300; line-height: 1.2; margin-bottom: 20px; }
.cs-optin--inline .cs-form input[type=email], .cs-optin--inline .cs-form button { height: 48px; }

/* ---------- Articolo ---------- */
.cs-col { width: 720px; max-width: 100%; margin-left: auto; margin-right: auto; }
.cs-art-head { padding-top: 56px; }
.cs-crumbs { display: flex; gap: 8px; flex-wrap: wrap; font-family: var(--cs-mono); font-size: 11.5px; color: var(--cs-muted); margin-bottom: 26px; line-height: 1.4; }
.cs-art-h1 { margin: 22px 0 0; font-family: var(--cs-serif); font-size: clamp(36px, 4.6vw, 58px); font-weight: 300; line-height: 1.04; letter-spacing: -0.02em; text-wrap: pretty; }
.cs-standfirst { margin: 24px 0 0; font-size: 19px; line-height: 1.55; color: var(--cs-body); }
.cs-byline { margin-top: 26px; display: flex; align-items: center; gap: 12px; font-size: 14px; line-height: 1.35; color: var(--cs-muted); }
.cs-byline b { color: var(--cs-ink); font-weight: 500; }
.cs-byline-mark { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--cs-tint); border: 1px solid var(--cs-rule); display: flex; align-items: center; justify-content: center; font-family: var(--cs-mono); font-size: 12px; color: var(--cs-teal); }
.cs-byline-sub { font-family: var(--cs-mono); font-size: 11.5px; }
.cs-art-hero { margin: 0; padding: 44px var(--cs-pad) 0; }
.cs-art-hero img { height: 500px; }
.cs-art-hero figcaption { margin-top: 10px; font-family: var(--cs-mono); font-size: 11px; color: var(--cs-muted); line-height: 1.4; }

.cs-body { padding-top: 40px; }
.cs-body > p, .cs-body > ul, .cs-body > ol { font-family: var(--cs-serif); font-size: 21px; line-height: 1.7; margin: 0 0 22px; }
.cs-body > ul, .cs-body > ol { padding-left: 24px; }
.cs-body li { margin-bottom: 8px; }
.cs-body li::marker { color: var(--cs-teal); }
.cs-body h2 { margin: 52px 0 0; font-size: 26px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.25; }
.cs-body h2 + p { margin-top: 14px; }
.cs-body h3 { margin: 32px 0 8px; font-size: 19px; font-weight: 500; line-height: 1.3; }
.cs-body strong { font-weight: 500; }
.cs-body a { color: var(--cs-teal); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.cs-body a:hover { color: var(--cs-ink); }

/* Nota a righe */
.cs-note { margin: 36px 0; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; padding: 22px 0; border-top: 1px solid var(--cs-ink); border-bottom: 1px solid var(--cs-rule); font-size: 16px; line-height: 1.55; }
.cs-note img { width: 24px; height: 24px; }
.cs-note-label { font-weight: 500; }

/* Tabella a righe */
.cs-tablewrap { margin: 36px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cs-table { width: 100%; border-collapse: collapse; font-size: 15.5px; line-height: 1.45; }
.cs-table caption { caption-side: bottom; text-align: left; padding-top: 10px; font-size: 13px; color: var(--cs-muted); line-height: 1.5; }
.cs-table th { text-align: left; font-family: var(--cs-mono); font-weight: 400; font-size: 11.5px; color: var(--cs-muted); padding: 10px 12px 10px 0; border-bottom: 1px solid var(--cs-ink); vertical-align: bottom; }
.cs-table td { padding: 13px 12px 13px 0; border-bottom: 1px solid var(--cs-rule); vertical-align: top; }
.cs-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cs-table tr.cs-tr-hl td { background: var(--cs-tint-2); }
.cs-table td:first-child, .cs-table th:first-child { padding-left: 0; }

/* Elenco di controllo */
.cs-check { margin: 28px 0; padding: 0; list-style: none; border-top: 1px solid var(--cs-ink); }
.cs-check li { margin: 0; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding: 16px 0; border-bottom: 1px solid var(--cs-rule); font-size: 16.5px; line-height: 1.55; }
.cs-check li::before { content: ""; width: 14px; height: 14px; margin-top: 5px; border: 1px solid var(--cs-teal); border-radius: 2px; }

/* Fonti e avvertenza */
.cs-sources { margin-top: 56px; padding-top: 18px; border-top: 1px solid var(--cs-ink); }
.cs-sources h2 { margin: 0 0 12px; font-size: 15px; font-weight: 500; }
.cs-sources ul { margin: 0; padding: 0; list-style: none; }
.cs-sources li { padding: 9px 0; border-bottom: 1px solid var(--cs-rule); font-size: 14.5px; line-height: 1.45; }
.cs-sources a { color: var(--cs-teal); }
.cs-disclaimer { margin: 28px 0 0; font-size: 13px; line-height: 1.6; color: var(--cs-muted); }

/* ---------- Rubrica ---------- */
.cs-cat-top { padding: 56px var(--cs-pad) 0; display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 64px; align-items: end; }
.cs-cat-h1 { margin: 22px 0 0; font-family: var(--cs-serif); font-size: clamp(44px, 5.6vw, 72px); font-weight: 300; line-height: 1.02; letter-spacing: -0.02em; }
.cs-cat-blurb { margin: 0; padding-bottom: 10px; font-size: 17px; line-height: 1.6; color: var(--cs-body); }
.cs-cat-lead { margin: 48px var(--cs-pad) 0; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 48px; align-items: center; padding-top: 32px; border-top: 1px solid var(--cs-ink); }
.cs-cat-lead .cs-photo { height: 420px; }
.cs-cat-lead-h { margin: 16px 0 14px; font-family: var(--cs-serif); font-size: clamp(30px, 3.2vw, 40px); font-weight: 300; line-height: 1.08; letter-spacing: -0.01em; }
.cs-cat-lead p { margin: 0 0 22px; color: var(--cs-body); font-size: 16.5px; }
.cs-cat-lead:hover .cs-cat-lead-h { color: var(--cs-teal); }

/* ---------- Pagine di servizio ---------- */
.cs-doc { width: 760px; max-width: 100%; margin: 0 auto; padding: 56px 0 0; }
.cs-doc h1 { margin: 18px 0 0; font-family: var(--cs-serif); font-size: clamp(36px, 4.4vw, 54px); font-weight: 300; line-height: 1.05; letter-spacing: -0.02em; }
.cs-doc .cs-lede { margin: 20px 0 0; font-size: 19px; line-height: 1.55; color: var(--cs-body); }
.cs-doc h2 { margin: 44px 0 12px; font-size: 22px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.3; }
.cs-doc h3 { margin: 26px 0 8px; font-size: 17px; font-weight: 500; }
.cs-doc p, .cs-doc li { font-size: 16.5px; line-height: 1.7; color: var(--cs-ink); }
.cs-doc p { margin: 0 0 14px; }
.cs-doc ul, .cs-doc ol { padding-left: 22px; margin: 0 0 14px; }
.cs-doc a { color: var(--cs-teal); text-decoration: underline; text-underline-offset: 3px; }
.cs-updated { margin-top: 36px !important; font-family: var(--cs-mono); font-size: 12px !important; color: var(--cs-muted) !important; }

.cs-company { margin: 26px 0 0; font-family: var(--cs-serif); font-size: 34px; font-weight: 400; line-height: 1.15; }
.cs-idbox { margin: 16px 0 8px; padding: 22px 24px; background: var(--cs-tint-2); border: 1px solid var(--cs-rule); border-left: 3px solid var(--cs-teal); border-radius: 4px; }
.cs-idbox-label { font-family: var(--cs-mono); font-size: 11.5px; color: var(--cs-muted); text-transform: uppercase; letter-spacing: .06em; }
.cs-idbox-val { display: block; margin-top: 6px; font-size: 30px; font-weight: 500; letter-spacing: -0.01em; color: var(--cs-teal); line-height: 1.15; }
.cs-idbox-row { margin-top: 14px; font-size: 15.5px; line-height: 1.65; }
.cs-idbox-row b { font-weight: 500; }
.cs-contact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--cs-rule); border: 1px solid var(--cs-rule); border-radius: 4px; overflow: hidden; margin: 8px 0 14px; }
.cs-contact > div { background: var(--cs-white); padding: 20px 22px; }
.cs-contact a, .cs-contact b { display: block; margin-top: 6px; font-size: 18px; font-weight: 500; color: var(--cs-ink); text-decoration: none; word-break: break-word; }
.cs-contact a:hover { color: var(--cs-teal); }
.cs-contact p { margin: 6px 0 0; font-size: 14px; color: var(--cs-muted); line-height: 1.5; }
.cs-dl { margin: 0 0 14px; }
.cs-dl dt { font-family: var(--cs-mono); font-size: 11.5px; color: var(--cs-muted); margin-top: 12px; }
.cs-dl dd { margin: 4px 0 0; font-size: 16.5px; line-height: 1.6; }

.cs-btn { height: 46px; display: inline-flex; align-items: center; justify-content: center; padding: 0 20px; border-radius: 4px; border: 1px solid var(--cs-ink); background: var(--cs-ink); color: #fff; font-size: 15px; font-weight: 500; line-height: 1; cursor: pointer; }
.cs-btn:hover { background: var(--cs-teal); border-color: var(--cs-teal); color: #fff; }
.cs-btn--ghost { background: transparent; color: var(--cs-ink); }
.cs-btn--ghost:hover { background: var(--cs-tint); color: var(--cs-ink); border-color: var(--cs-ink); }
.cs-steps { margin: 26px 0; padding: 0; list-style: none; counter-reset: st; border-top: 1px solid var(--cs-ink); }
.cs-steps li { counter-increment: st; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; padding: 16px 0; border-bottom: 1px solid var(--cs-rule); font-size: 16.5px; line-height: 1.55; }
.cs-steps li::before { content: "0" counter(st); font-family: var(--cs-mono); font-size: 12px; color: var(--cs-teal); padding-top: 4px; }

/* Pagina della lettera */
.cs-nl { padding: 56px var(--cs-pad) 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.cs-nl .cs-photo { height: 560px; }
.cs-nl h1 { margin: 22px 0 0; font-family: var(--cs-serif); font-size: clamp(38px, 4.6vw, 58px); font-weight: 300; line-height: 1.04; letter-spacing: -0.02em; }
.cs-nl-intro { margin: 20px 0 0; font-size: 18px; line-height: 1.6; color: var(--cs-body); }
.cs-nl .cs-steps { margin: 28px 0; }
.cs-nl-box { background: var(--cs-ink); color: #fff; border-radius: 4px; padding: 30px 32px; }
.cs-nl-box .cs-optin-title { font-size: 24px; margin-bottom: 12px; }

/* ---------- Piede ---------- */
.cs-foot { margin-top: 88px; border-top: 1px solid var(--cs-rule); padding: 28px var(--cs-pad) 32px; font-size: 13.5px; color: var(--cs-muted); }
.cs-foot-row { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.cs-foot-brand { font-size: 16px; font-weight: 500; color: var(--cs-ink); }
.cs-foot-nav { display: flex; gap: 28px; flex-wrap: wrap; }
.cs-foot-meta { font-family: var(--cs-mono); font-size: 11.5px; }
.cs-foot-note { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--cs-rule); font-size: 12.5px; line-height: 1.6; max-width: 980px; }
.cs-linkbtn { border: 0; background: none; padding: 0; color: var(--cs-teal); text-decoration: underline; text-underline-offset: 2px; font-size: inherit; cursor: pointer; }

/* ---------- Banner cookie ---------- */
.cs-cookie { position: fixed; left: 16px; bottom: 16px; z-index: 50; width: 480px; max-width: calc(100vw - 32px); background: var(--cs-white); color: var(--cs-ink); border: 1px solid var(--cs-rule); border-top: 2px solid var(--cs-ink); border-radius: 4px; padding: 20px 22px; box-shadow: 0 10px 30px rgba(34, 49, 60, .14); }
.cs-cookie[hidden] { display: none; }
.cs-cookie-h { font-size: 16px; font-weight: 500; }
.cs-cookie p { margin: 8px 0 16px; font-size: 13.5px; line-height: 1.55; color: var(--cs-body); }
.cs-cookie a { color: var(--cs-teal); text-decoration: underline; }
.cs-cookie-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cs-cookie .cs-btn { height: 42px; }

/* ==============================================================
   Responsive
   ============================================================== */
@media (max-width: 1180px) {
  :root { --cs-pad: 40px; }
  .cs-lead { grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; }
  .cs-band { grid-template-columns: minmax(0, 1fr) 380px; gap: 48px; padding: 48px; }
  .cs-nav { gap: 24px; }
}

@media (max-width: 960px) {
  .cs-lead, .cs-cat-top { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .cs-lead-side { padding-bottom: 0; }
  .cs-panorama img { height: 380px; }
  .cs-topicsec { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .cs-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
  .cs-band { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .cs-art-hero img { height: 420px; }
  .cs-cat-lead { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .cs-nl { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .cs-nl .cs-photo { height: 380px; }
  .cs-topics--wide { grid-template-columns: minmax(0, 1fr); }
  .cs-topics--wide .cs-topic { border-right: 0 !important; }

  /* menu a scomparsa */
  .cs-burger { display: flex; flex-direction: column; justify-content: center; gap: 6px; width: 44px; height: 44px; cursor: pointer; margin-right: -10px; padding: 10px; }
  .cs-burger span { display: block; height: 1px; background: var(--cs-ink); }
  .cs-nav { display: none; position: absolute; left: 0; right: 0; top: 76px; z-index: 20; flex-direction: column; align-items: stretch; gap: 0; background: var(--cs-paper); border-bottom: 1px solid var(--cs-ink); padding: 8px var(--cs-pad) 20px; font-size: 17px; }
  .cs-nav a { padding: 16px 0; border-bottom: 1px solid var(--cs-rule); }
  .cs-nav .cs-nav-btn { margin-top: 16px; padding: 0 18px; justify-content: center; border-bottom: 0; height: 46px; }
  .cs-navtoggle:checked ~ .cs-nav { display: flex; }
}

@media (max-width: 760px) {
  :root { --cs-pad: 20px; }
  body { font-size: 16.5px; }
  .cs-top { height: 64px; }
  .cs-nav { top: 64px; }
  .cs-logo-word { font-size: 18px; }
  .cs-lead { padding-top: 40px; }
  .cs-lead-h { font-size: clamp(34px, 9.4vw, 44px); line-height: 1.05; }
  .cs-panorama { padding-top: 28px; }
  .cs-panorama img { height: 240px; }
  .cs-topicsec, .cs-sec { padding-top: 56px; }
  .cs-topics { grid-template-columns: minmax(0, 1fr); }
  .cs-topics .cs-topic, .cs-topics .cs-topic:nth-child(even) { padding: 20px 0; border-right: 0; grid-template-columns: 40px minmax(0, 1fr) 30px; }
  .cs-cards, .cs-cards--two { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .cs-card .cs-photo, .cs-cards--two .cs-card .cs-photo { height: auto; aspect-ratio: 16 / 9; }
  .cs-card-title { font-size: 24px; }
  .cs-rows { grid-template-columns: minmax(0, 1fr); }
  .cs-row-title { font-size: 20px; }
  .cs-figs-grid { grid-template-columns: minmax(0, 1fr); }
  .cs-fig-val { font-size: 28px; }
  .cs-band { margin-top: 56px; padding: 32px 22px; }
  .cs-optin--inline { padding: 26px 20px; }
  .cs-optin-title { font-size: 24px; }
  .cs-form button { padding-left: 12px; }
  .cs-col { padding-left: var(--cs-pad); padding-right: var(--cs-pad); }
  .cs-art-head { padding-top: 32px; }
  .cs-art-h1 { font-size: clamp(32px, 8.6vw, 40px); line-height: 1.07; }
  .cs-standfirst { font-size: 17.5px; }
  .cs-art-hero { padding-top: 28px; }
  .cs-art-hero img { height: auto; aspect-ratio: 16 / 10; }
  .cs-art-hero figcaption { padding: 0; }
  .cs-body > p, .cs-body > ul, .cs-body > ol { font-size: 19px; line-height: 1.65; }
  .cs-body h2 { font-size: 23px; margin-top: 44px; }
  .cs-table { font-size: 14.5px; }
  .cs-cat-top { padding-top: 32px; }
  .cs-cat-lead { margin-top: 32px; }
  .cs-cat-lead .cs-photo { height: auto; aspect-ratio: 16 / 9; }
  .cs-doc { padding: 32px var(--cs-pad) 0; }
  .cs-company { font-size: 28px; }
  .cs-idbox-val { font-size: 26px; }
  .cs-contact { grid-template-columns: minmax(0, 1fr); }
  .cs-nl { padding-top: 32px; }
  .cs-nl .cs-photo { height: auto; aspect-ratio: 4 / 3; }
  .cs-nl-box { padding: 26px 20px; }
  .cs-foot { margin-top: 64px; }
  .cs-foot-row { flex-direction: column; align-items: flex-start; gap: 16px; }
  .cs-foot-nav { gap: 14px 22px; }
}
.cs-doc a.cs-btn, .cs-doc a.cs-btn:hover { color: #fff; text-decoration: none; }
.cs-steps li b { font-weight: 500; }
.cs-body > p.cs-disclaimer { font-family: var(--cs-sans); font-size: 13px; line-height: 1.6; color: var(--cs-muted); margin: 28px 0 0; }
.cs-body .cs-optin a, .cs-body .cs-optin a:hover { color: #fff; }
.cs-body .cs-sources a { text-decoration: none; }
.cs-body .cs-sources a:hover { text-decoration: underline; }